Skip to content

【Button】Add new style, 'success' & 'warning' #9

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

Merged
merged 3 commits into from
Dec 14, 2021
Merged

【Button】Add new style, 'success' & 'warning' #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc26418
feat(button): 添加 "success" 和 "warning" 两种风格
Zcating Dec 6, 2021
2b9b9dd
doc(button): 优化文档，新增按钮展示
Zcating Dec 9, 2021
909e0fe
Merge branch 'dev' into button
Zcating Dec 13, 2021
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
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/button/src/button-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ExtractPropTypes, PropType } from 'vue';

export type IButtonType = 'button' | 'submit' | 'reset';
export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
export type IButtonPosition = 'left' | 'right' | 'default';
export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';

Expand Down
28 changes: 25 additions & 3 deletions packages/devui-vue/devui/button/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@ $devui-btn-normal-config: (
background-color: $devui-contrast
),
success: (
color: $devui-light-text,
color: $devui-dark-text,
min-width: $devui-btn-min-width,
background-color: $devui-success
),
warning: (
color: $devui-light-text,
color: $devui-dark-text,
min-width: $devui-btn-min-width,
background-color: $devui-warning
),
Expand Down Expand Up @@ -170,6 +170,28 @@ $devui-btn-pseudo-config: (
active: (
background-color: $devui-contrast-active
)
),
success: (
hover: (
background-color: $devui-success-hover
),
focus: (
background-color: $devui-success-hover
),
active: (
background-color: $devui-success-active
)
),
warning: (
hover: (
background-color: $devui-warning-hover
),
focus: (
background-color: $devui-warning-hover
),
active: (
background-color: $devui-warning-active
)
)
);

Expand All @@ -189,7 +211,7 @@ $devui-btn-pseudo-config: (
}
}
}
@each $type in text, text-dark, common, stress, primary, danger {
@each $type in text, text-dark, common, stress, primary, danger, success, warning, {
&.devui-btn-#{$type} {
@each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) {
&:#{$pseudo} {
Expand Down
6 changes: 6 additions & 0 deletions packages/devui-vue/devui/style/theme/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,14 @@ $devui-block: var(--devui-block, #ffffff); // 大面
$devui-area: var(--devui-area, #f8f8f8); // 可折叠区块的背景色（展开区域颜色）
$devui-danger: var(--devui-danger, #f66f6a); // 失败、错误、告警
$devui-warning: var(--devui-warning, #fac20a); // 警告、需注意类型提示
$devui-warning-hover: var(--devui-warning, #fac20a); // 警告、需注意类型提示
$devui-warning-active: var(--devui-warning, #fac20a);
$devui-warning-active-focus: var(--devui-warning, #fac20a);
$devui-waiting: var(--devui-waiting, #9faad7); // 等待中
$devui-success: var(--devui-success, #50d4ab); // 成功、正确
$devui-success-hover: var(--devui-warning, #50d4ab); // 成功、
$devui-success-active: var(--devui-warning, #50d4ab);
$devui-success-active-focus: var(--devui-warning, #50d4ab);
$devui-info: var(--devui-info, #5e7ce0); // 通知、一般提示、执行中
$devui-initial: var(--devui-initial, #e9edfa); // 初始化、未执行
$devui-unavailable: var(--devui-unavailable, #f5f5f6); // 不可用、禁用状态
Expand Down
93 changes: 54 additions & 39 deletions packages/devui-vue/docs/components/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,23 @@
```
:::

### 警示按钮
用于标识系统中的关键操作，例如购买场景。
:::demo
```vue
<template>
<div class="flex flex-col space-y-xs">
<d-button btnStyle="primary" type="submit">主要按钮</d-button>
<d-button btnStyle="common" type="submit">通用按钮</d-button>
<d-button btnStyle="text" type="submit">文本按钮</d-button>
<d-button btnStyle="text-dark" type="submit">文本（暗色）按钮</d-button>
<d-button btnStyle="success" type="submit">成功按钮</d-button>
<d-button btnStyle="warning" type="submit">警告按钮</d-button>
</div>
</template>
```
:::

### 文字按钮
用于标识系统中的关键操作，例如购买场景。
:::demo
Expand Down Expand Up @@ -112,51 +129,44 @@
:::demo
```vue
<template>
<div class="btn-group">
<div class="mb-l">
<d-button icon="add" btnStyle="primary"> New </d-button>
<d-button icon="filter" btnStyle="common"> Filter </d-button>
</div>
<div class="btn-group">
<div class="mb-l">
<d-button icon="add" btnStyle="primary" :disabled="true"> New(disabled) </d-button>
<d-button icon="filter" btnStyle="common" :disabled="true"> Filter(disabled) </d-button>
</div>
<div class="btn-group">
<div class="mb-l">
<d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px"> Link </d-button>
<d-button icon="run" btnStyle="text-dark"> Run </d-button>
</div>
<div class="btn-group">
<d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
<d-button icon="run" btnStyle="text-dark" :disabled="true"> Run(disabled) </d-button>
<div class="mb-l">
<d-button class="mr-xs" icon="connect" btnStyle="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
<d-button class="mr-xs" icon="run" btnStyle="text-dark" :disabled="true"> Run(disabled) </d-button>
</div>
<div class="btn-group">
<d-button icon="add" btnStyle="text-dark" title="add"></d-button>
<d-button icon="delete" btnStyle="text-dark" title="delete"></d-button>
<div class="mb-l">
<d-button class="mr-xs" icon="add" btnStyle="text-dark" title="add"></d-button>
<d-button class="mr-xs" icon="delete" btnStyle="text-dark" title="delete"></d-button>
</div>
<div class="btn-group">
<div class="mb-l">
<d-button icon="add" btnStyle="text-dark" :disabled="true" title="add"></d-button>
<d-button icon="delete" btnStyle="text-dark" :disabled="true" title="delete"></d-button>
</div>
<div class="btn-group">
<d-button btnStyle="common" class="rightIcon" bsSize="xs">
<div class="mb-l">
<d-button class="mr-xs" btnStyle="common" class="mr-xs" bsSize="xs">
Click me
<span class="icon-chevron-down"></span>
</d-button>
</div>
<div class="btn-group">
<d-button btnStyle="text-dark" class="rightIcon">
<div class="mb-l">
<d-button class="mr-xs" btnStyle="text-dark">
Click me
<span class="icon-chevron-down"></span>
</d-button>
</div>
</template>
<style>
.btn-group {
margin-bottom: 20px;
}

.btn-group .devui-btn-host {
margin-right: 8px;
}

.icon-chevron-down {
display: inline-block;
Expand All @@ -171,35 +181,40 @@

### API
d-button 参数
| 参数 | 类型 | 默认 | 说明 |
| :-------: | :-------------------------------: | :-------: | :------------------------------- |
| type | `'button' \| 'submit' \| 'reset'` | 'button' | 可选，按钮类型 |
| btnStyle | `IButtonStyle` | 'primary' | 可选，按钮风格 |
| position | `IButtonPosition` | 'default' | 可选，按钮位置 |
| size | `IButtonSize` | 'md' | 可选，按钮大小 |
| bordered | `boolean` | false | 可选，是否有边框 |
| icon | `string` | -- | 可选，点击背景触发的事件 |
| width | `string` | -- | 可选，弹出框宽度(e.g '300px') |
| disabled | `boolean` | false | 可选，是否禁用button |
| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 |
| 参数 | 类型 | 默认 | 说明 |
| :-------: | :---------------: | :-------: | :------------------------------- |
| type | `IButtonType` | 'button' | 可选，按钮类型 |
| btnStyle | `IButtonStyle` | 'primary' | 可选，按钮风格 |
| position | `IButtonPosition` | 'default' | 可选，按钮位置 |
| size | `IButtonSize` | 'md' | 可选，按钮大小 |
| bordered | `boolean` | false | 可选，是否有边框 |
| icon | `string` | -- | 可选，点击背景触发的事件 |
| width | `string` | -- | 可选，弹出框宽度(e.g '300px') |
| disabled | `boolean` | false | 可选，是否禁用button |
| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 |

d-button 事件
| 参数 | 类型 | 默认 | 说明 |
| :-----: | :---------------------------: | :---: | :------------- |
| onClick | `(event: MouseEvent) => void` | -- | 可选，点击事件 |


IButtonType
``` typescript
type IButtonStyle = 'button' | 'submit' | 'reset';
```

IButtonStyle
```typescript
``` typescript
type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
```

IButtonSize
```typescript
type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
IButtonPosition
``` typescript
type IButtonStyle = 'left' | 'right' | 'default';
```

IButtonPosition
```typescript
type IButtonPosition = 'left' | 'right' | 'default';
IButtonSize
``` typescript
type IButtonStyle = 'lg' | 'md' | 'sm' | 'xs';
```