diff --git a/docs/mobile/api_v2/button.md b/docs/mobile/api_v2/button.md index f2d5726530..aee607069b 100644 --- a/docs/mobile/api_v2/button.md +++ b/docs/mobile/api_v2/button.md @@ -6,7 +6,7 @@ isComponent: true toc: false --- -### 类型 +### 组件类型 #### 基础按钮 @@ -24,14 +24,43 @@ toc: false {{ base }} -### 状态 +#### 图标按钮 + +图标按钮由图标+文字或图标构成。通过图标可增强识别性,以便直观理解。 + +{{ icon }} + +#### 幽灵按钮 + +幽灵按钮将按钮的内容反色,背景变为透明,一般是底色透明。常用于有色背景上,例如 banner 图等。 + +{{ ghost }} + +#### 组合按钮 + +{{ group }} + +#### 通栏按钮 + +通栏按钮在宽度上充满其所在的父容器(无 padding 和 margin 值)。该按钮常见于移动端和一些表单场景中。 + +{{ block }} + +### 组件状态 #### 按钮禁用态 {{ status }} -### 规格 - +### 组件样式 #### 按钮尺寸 -{{ size }} \ No newline at end of file +{{ size }} + +#### 按钮形状 + +{{ shape }} + +#### 按钮主题 + +{{ theme }} \ No newline at end of file diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less index 9bcccac2cd..30b2c68b09 100644 --- a/style/mobile/components/button/v2/_index.less +++ b/style/mobile/components/button/v2/_index.less @@ -93,7 +93,18 @@ -webkit-appearance: none; &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: 0 0; border-radius: calc(@button-border-radius * 2); + border-style: solid; + box-sizing: border-box; } &--text { @@ -328,14 +339,14 @@ } } - &__loading + &__content:not(:empty), - &__icon + &__content:not(:empty) { - margin-left: 8rpx; + .@{prefix}-loading + &__content:not(:empty), + .@{prefix}-icon + &__content:not(:empty) { + margin-left: 4px; } - &__icon { - border-radius: @button-icon-border-radius; - } + // &__icon { + // border-radius: @button-icon-border-radius; + // } // 圆角长方形 &--round { diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index 5dafcdd6a7..7c1006c678 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -2,6 +2,8 @@ @import "./_hairline.less"; +@import "./_cursor.less"; + .limit-title-row() { /* stylelint-disable-next-line */ display: -webkit-box;