Skip to content

Commit a12b394

Browse files
云水云水
云水
authored and
云水
committed
refactor: buttton scss
1 parent ff2a167 commit a12b394

File tree

5 files changed

+287
-111
lines changed

5 files changed

+287
-111
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎doc/markdown/nButton/zh-CN/index.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,34 @@
66

77
## 代码演示
88

9+
### 基础用法
10+
:::demo 使用 `type`、`status`、`shape`等来定义按钮的样式。
11+
```html
12+
<template>
13+
<div>
14+
<n-button type="default">Default</n-button>
15+
<n-button type="primary">Primary</n-button>
16+
<n-button type="link">Link</n-button>
17+
<n-button type="ghost">Ghost</n-button>
18+
<n-button type="delicate">Delicate</n-button>
19+
</div>
20+
<div>
21+
<n-button type="primary" status="success">success</n-button>
22+
<n-button type="primary" status="info">info</n-button>
23+
<n-button type="primary" status="warning">warning</n-button>
24+
<n-button type="primary" status="danger">danger</n-button>
25+
</div>
26+
<div>
27+
<n-button type="primary" shape="square">square</n-button>
28+
<n-button type="primary" shape="square" icon="icon-search"></n-button>
29+
<n-button type="primary" shape="round">round</n-button>
30+
<n-button type="primary" shape="circle" icon="icon-home"></n-button>
31+
</div>
32+
</template>
33+
```
34+
:::
35+
36+
937
### 按钮类型
1038
:::demo 按钮有五种类型：默认按钮、主按钮、链接按钮、幽灵按钮、微妙按钮。
1139
```html
@@ -40,6 +68,60 @@ export default {
4068
```
4169
:::
4270

71+
### 按钮状态
72+
:::demo 按钮有四种按钮状态：`success`、`info`、`warning`、`danger`。
73+
```html
74+
<template>
75+
<div>
76+
<n-button type="default" status="success">success</n-button>
77+
<n-button type="default" status="info">info</n-button>
78+
<n-button type="default" status="warning">warning</n-button>
79+
<n-button type="default" status="danger">danger</n-button>
80+
</div>
81+
<div>
82+
<n-button type="primary" status="success">success</n-button>
83+
<n-button type="primary" status="info">info</n-button>
84+
<n-button type="primary" status="warning">warning</n-button>
85+
<n-button type="primary" status="danger">danger</n-button>
86+
</div>
87+
</template>
88+
```
89+
90+
:::
91+
92+
### 按钮形状
93+
:::demo 按钮有三种形状属性：`square`、`round`、`circle`
94+
```html
95+
<template>
96+
<n-button type="primary" shape="square">square</n-button>
97+
<n-button type="primary" shape="square" icon="icon-search"></n-button>
98+
<n-button type="primary" shape="round">round</n-button>
99+
<n-button type="primary" shape="circle" icon="icon-home"></n-button>
100+
</template>
101+
```
102+
:::
103+
104+
### 按钮尺寸
105+
:::demo 按钮有四种尺寸：`xs`、`ms`、`md`、`lg`,默认为`md`。
106+
```html
107+
<template>
108+
<n-button size="xs">
109+
xs
110+
</n-button>
111+
<n-button size="sm">
112+
sm
113+
</n-button>
114+
<n-button size="md">
115+
md
116+
</n-button>
117+
<n-button size="lg">
118+
lg
119+
</n-button>
120+
</template>
121+
```
122+
:::
123+
124+
43125
### 图标按钮
44126

45127
:::demo 当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

‎packages/n-button/index.scss

Lines changed: 153 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,179 @@
1-
button{
2-
outline:none;
3-
}
4-
5-
.nbutton{
6-
overflow:hidden;
7-
min-width: 80px;
8-
height: 36px;
9-
padding: 0 15px;
10-
background-color: #F7F7FA;
11-
border-radius: 6px;
12-
border: 0;
13-
text-align: center;
14-
font-family: PingFangSC-Regular;
15-
font-size: 14px;
16-
line-height: 36px;
17-
cursor:pointer;
18-
.nbutton-content{
19-
display: flex;
20-
justify-content: center;
21-
}
22-
.nbutton-icon{
1+
@import '../theme/color.scss';
2+
button {
3+
outline: none;
4+
}
5+
6+
$xs:2px 8px;
7+
$sm:5px 10px;
8+
$md:8px 12px;
9+
$lg:10px 16px;
10+
.nbutton {
11+
overflow: hidden;
12+
border-radius: 6px;
13+
border: 0;
14+
text-align: center;
15+
font-family: PingFangSC-Regular;
2316
display: inline-block;
24-
margin-right: 8px;
25-
}
17+
position: relative;
18+
outline: none;
19+
font-weight: 400;
20+
-webkit-appearance: none;
21+
user-select: none;
22+
cursor: pointer;
23+
white-space: nowrap;
24+
transition: all .1s linear;
25+
box-sizing: border-box;
26+
cursor: pointer;
27+
.nbutton-icon {
28+
display: inline-block;
29+
margin-right: 8px;
30+
}
31+
.nbutton-icon-only {
32+
display: block;
33+
font-size: 12px;
34+
margin: 0;
35+
height: 16px;
36+
width: 16px;
37+
}
38+
}
39+
40+
.nbutton-hasicon {
41+
padding: 10px !important;
42+
}
43+
44+
@mixin nbutton-colors($color, $type) {
45+
background: $color;
46+
color: $color;
47+
@if $type=='default' {
48+
background: transparent;
49+
border: 1px solid $color;
50+
&:focus,
51+
&:hover {
52+
background: mix($white, $color, 90%);
53+
border: 1px solid mix($white, $color, 20%);
54+
color: $color;
55+
}
56+
}
57+
@if $type=='primary' {
58+
border: none;
59+
color: $white;
60+
&:focus,
61+
&:hover {
62+
background: mix($white, $color, 30%)
63+
}
64+
;
65+
&:active {
66+
background: mix($black, $color, 5%)
67+
}
68+
&:disabled {
69+
background: mix($white, $color, 40%)
70+
}
71+
}
72+
}
73+
74+
.nbutton-type-default {
75+
@include nbutton-colors($primaryColor, 'default');
76+
}
77+
78+
.nbutton-type-primary {
79+
@include nbutton-colors($primaryColor, 'primary');
80+
border: none;
81+
color: $white !important;
82+
}
83+
84+
.nbutton-type-link {
85+
color: $primaryColor;
86+
background: none;
87+
border: none;
88+
}
89+
90+
.nbutton-type-ghost {
91+
color: $primaryColor;
92+
background: #ffffff;
93+
border: 1px solid $primaryColor;
2694
}
2795

28-
.default{
29-
color: #575757;
30-
&:focus,&:hover{
31-
background: #E5E5EA;
32-
};
33-
&:active{
34-
color: #272C36;
35-
background: #D9D9D9;
36-
}
96+
.nbutton-type-delicate {
97+
color: #8E8E93;
98+
background: none;
99+
border: none;
37100
}
38101

39-
.primary{
40-
background: #34C3FF;
41-
color: #ffffff;
42-
&:focus,&:hover{
43-
background: #2EABDF;
44-
};
45-
&:active{
46-
background: #2792BF;;
47-
}
48-
&:disabled{
49-
background: #C2EDFF;
50-
}
102+
.nbutton-type-default.nbutton-status-success {
103+
@include nbutton-colors($successColor, 'default');
51104
}
52105

53-
.link{
54-
color: #34C3FF;
55-
background: none;
56-
border: none;
106+
.nbutton-type-default.nbutton-status-info {
107+
@include nbutton-colors($infoColor, 'default');
57108
}
58109

59-
.ghost{
60-
color: #34C3FF;
61-
background: #ffffff;
62-
border: 1px solid #34C3FF;
110+
.nbutton-type-default.nbutton-status-warning {
111+
@include nbutton-colors($warningColor, 'default');
63112
}
64113

65-
.delicate{
66-
color: #8E8E93;
67-
background: none;
68-
border: none;
114+
.nbutton-type-default.nbutton-status-danger {
115+
@include nbutton-colors($dangerColor, 'default');
116+
}
117+
118+
.nbutton-type-primary.nbutton-status-success {
119+
@include nbutton-colors($successColor, 'primary');
120+
}
121+
122+
.nbutton-type-primary.nbutton-status-info {
123+
@include nbutton-colors($infoColor, 'primary');
124+
}
125+
126+
.nbutton-type-primary.nbutton-status-warning {
127+
@include nbutton-colors($warningColor, 'primary');
128+
}
129+
130+
.nbutton-type-primary.nbutton-status-danger {
131+
@include nbutton-colors($dangerColor, 'primary');
69132
}
70133

71134
.nbutton-disabled {
72-
background-color: #F7F7FA;
73-
cursor: not-allowed;
74-
&:focus,&:hover{
75135
background-color: #F7F7FA;
76-
outline: none;
77-
}
136+
cursor: not-allowed;
137+
&:focus,
138+
&:hover {
139+
background-color: #F7F7FA;
140+
outline: none;
141+
}
142+
}
143+
144+
.nbutton-shape-square {
145+
border-radius: 6px;
146+
}
147+
148+
.nbutton-shape-circle {
149+
border-radius: 50%;
150+
padding: 0;
151+
}
152+
153+
.nbutton-shape-round {
154+
border-radius: 18px;
78155
}
79156

80-
.lg{
81-
width: 96px;
82-
height: 24px;
83-
font-size: 16px;
84-
padding: 10px 16px;
157+
.nbutton-size-lg {
158+
padding: $lg;
159+
font-size: 16px;
85160
}
86161

87-
.md{
88-
width: 80px;
89-
height: 36px;
90-
font-size: 14px;
91-
padding: 8px 12px;
162+
.nbutton-size-md {
163+
padding: $md;
164+
font-size: 14px;
92165
}
93166

94-
.sm{
95-
width: 76px;
96-
height: 30px;
97-
font-size: 14px;
98-
padding: 5px 10px;
167+
.nbutton-size-sm {
168+
padding: $sm;
169+
font-size: 14px;
99170
}
100171

101-
.xs{
102-
width: 64px;
103-
height: 24px;
104-
font-size: 12px;
105-
padding: 2px 8px;
172+
.nbutton-size-xs {
173+
padding: $xs;
174+
font-size: 12px;
106175
}
107176

108-
.nbutton-slot{
109-
text-align: center;
177+
.nbutton-slot {
178+
text-align: center;
110179
}

0 commit comments

Comments
 (0)