Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Button): Button组件同步 #1883

Merged
merged 4 commits into from
Aug 19, 2024
Merged

feat(Button): Button组件同步 #1883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
03a8f30
feat(Button): 补充虚框按钮的样式
Aug 16, 2024
55469e4
feat: 补充TDesign设计稿中的虚框按钮样式
Aug 16, 2024
cc0e4fd
feat(Button): 注释Button老版本的样式
Aug 16, 2024
ffbad37
feat(Button): 更新文档示例
Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions docs/mobile/api/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ isComponent: true
toc: false
---

### 类型
### 组件类型

#### 基础按钮

Expand All @@ -24,14 +24,43 @@ toc: false

{{ base }}

### 状态
#### 图标按钮

图标按钮由图标+文字或图标构成。通过图标可增强识别性，以便直观理解。

{{ icon }}

#### 幽灵按钮

幽灵按钮将按钮的内容反色，背景变为透明，一般是底色透明。常用于有色背景上，例如 banner 图等。

{{ ghost }}

#### 组合按钮

{{ group }}

#### 通栏按钮

通栏按钮在宽度上充满其所在的父容器（无 padding 和 margin 值）。该按钮常见于移动端和一些表单场景中。

{{ block }}

### 组件状态

#### 按钮禁用态

{{ status }}

### 规格

### 组件样式
#### 按钮尺寸

{{ size }}
{{ size }}

#### 按钮形状

{{ shape }}

#### 按钮主题

{{ theme }}
2 changes: 1 addition & 1 deletion style/mobile/components/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "./badge/_index.less";

@import "./button/_index.less";
// @import "./button/_index.less";

@import "./button-group/_index.less";

Expand Down
42 changes: 40 additions & 2 deletions style/mobile/components/button/v2/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -347,6 +367,7 @@

&.@{button}--danger {
color: @button-danger-dashed-color;
background-color: transparent;

&::after {
border-color: @button-danger-dashed-border-color;
Expand All @@ -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),
Expand Down
8 changes: 8 additions & 0 deletions style/mobile/components/button/v2/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down
Loading