From 03a8f3073fb8ca2e2ce61ce916bc26fcebd912ec Mon Sep 17 00:00:00 2001 From: toby Date: Fri, 16 Aug 2024 15:50:08 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(Button):=20=E8=A1=A5=E5=85=85=E8=99=9A?= =?UTF-8?q?=E6=A1=86=E6=8C=89=E9=92=AE=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/mobile/components/button/v2/_var.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less index 45a0296fcd..f824ea3609 100644 --- a/style/mobile/components/button/v2/_var.less +++ b/style/mobile/components/button/v2/_var.less @@ -73,6 +73,10 @@ @button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color); @button-light-outline-bg-color: var(--td-button-light-outline-bg-color, @brand-color-light); @button-light-outline-disabled-color: var(--td-button-light-outline-disabled-color, @brand-color-disabled); +// default + dashed +@button-default-dashed-color: var(--td-button-default-dashed-color, @text-color-primary); +@button-default-dashed-border-color: var(--td-button-default-dashed-border-color, @component-border); +@button-default-dashed-disabled-color: var(--td-button-default-dashed-disabled-color, @component-border); // primary + dashed @button-primary-dashed-color: var(--td-button-primary-dashed-color, @brand-color); @button-primary-dashed-border-color: var(--td-button-primary-dashed-border-color, @button-primary-dashed-color); @@ -81,6 +85,10 @@ @button-danger-dashed-color: var(--td-button-danger-dashed-color, @error-color); @button-danger-dashed-border-color: var(--td-button-danger-dashed-border-color, @button-danger-dashed-color); @button-danger-dashed-disabled-color: var(--td-button-danger-dashed-disabled-color, @button-danger-disabled-color); +// light + dashed +@button-light-dashed-color: var(--td-button-light-dashed-color, @brand-color); +@button-light-dashed-border-color: var(--td-button-light-dashed-border-color, @button-primary-dashed-color); +@button-light-dashed-disabled-color: var(--td-button-light-dashed-disabled-color, @component-border); // primary + text @button-primary-text-color: var(--td-button-primary-text-color, @brand-color); @button-primary-text-disabled-color: var(--td-button-primary-text-disabled-color, @brand-color-disabled); From 55469e4844c5e2024b552503160bdb41b0f4220b Mon Sep 17 00:00:00 2001 From: toby Date: Fri, 16 Aug 2024 15:56:27 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85TDesign=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E7=A8=BF=E4=B8=AD=E7=9A=84=E8=99=9A=E6=A1=86=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/mobile/components/button/v2/_index.less | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less index a874f939ef..b4c0066dd0 100644 --- a/style/mobile/components/button/v2/_index.less +++ b/style/mobile/components/button/v2/_index.less @@ -325,11 +325,31 @@ } &--dashed { - background-color: transparent; - border-style: dashed; + &::after { + border-style: dashed; + } + + &.@{button}--default { + color: @button-default-dashed-color; + background-color: transparent; + + &::after { + border-color: @button-default-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-default-dashed-disabled-color; + + &::after { + border-color: @button-default-dashed-disabled-color; + } + } + } &.@{button}--primary { color: @button-primary-dashed-color; + background-color: transparent; &::after { border-color: @button-primary-dashed-border-color; @@ -347,6 +367,7 @@ &.@{button}--danger { color: @button-danger-dashed-color; + background-color: transparent; &::after { border-color: @button-danger-dashed-border-color; @@ -361,6 +382,23 @@ } } } + + &.@{button}--light { + color: @button-light-dashed-color; + + &::after { + border-color: @button-light-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-light-dashed-disabled-color; + + &::after { + border-color: @button-light-dashed-disabled-color; + } + } + } } .@{prefix}-loading + &__content:not(:empty), From cc0e4fdb1e62549e791dea5484269c7bbd813dbe Mon Sep 17 00:00:00 2001 From: toby Date: Fri, 16 Aug 2024 16:26:26 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat(Button):=20=E6=B3=A8=E9=87=8AButton?= =?UTF-8?q?=E8=80=81=E7=89=88=E6=9C=AC=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/mobile/components/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/_index.less b/style/mobile/components/_index.less index 2a594902cf..ac9badefa4 100644 --- a/style/mobile/components/_index.less +++ b/style/mobile/components/_index.less @@ -1,6 +1,6 @@ @import "./badge/_index.less"; -@import "./button/_index.less"; +// @import "./button/_index.less"; @import "./button-group/_index.less"; From ffbad3732613184a4e44c80dca8192299dc51ad9 Mon Sep 17 00:00:00 2001 From: toby Date: Fri, 16 Aug 2024 16:56:00 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat(Button):=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/mobile/api/button.md | 39 ++++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api/button.md b/docs/mobile/api/button.md index f2d5726530..aee607069b 100644 --- a/docs/mobile/api/button.md +++ b/docs/mobile/api/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