Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
1de30ddb
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1de30ddb
编写于
10月 29, 2020
作者:
Z
zy19940510
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: button功能完善
上级
129a7a87
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
68 addition
and
20 deletion
+68
-20
.editorconfig
.editorconfig
+12
-0
src/packages/button/demo.vue
src/packages/button/demo.vue
+23
-7
src/packages/button/index.scss
src/packages/button/index.scss
+16
-5
src/packages/button/index.vue
src/packages/button/index.vue
+3
-1
src/styles/variables.scss
src/styles/variables.scss
+14
-7
未找到文件。
.editorconfig
0 → 100644
浏览文件 @
1de30ddb
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = false
[*.md]
trim_trailing_whitespace = false
src/packages/button/demo.vue
浏览文件 @
1de30ddb
...
...
@@ -11,20 +11,36 @@
<nut-button
type=
"warning"
>
警告按钮
</nut-button>
<nut-button
type=
"success"
>
成功按钮
</nut-button>
</div>
<div
class=
"title"
>
边框按钮
</div>
<div
class=
"title"
>
朴素按钮
</div>
<div
class=
"demo-button-row2"
>
<nut-button
plain
type=
"primary"
>
朴素按钮
</nut-button>
<nut-button
plain
type=
"info"
>
朴素按钮
</nut-button>
</div>
<div
class=
"title"
>
禁用状态
</div>
<div
class=
"demo-button-row2"
>
<nut-button
disabled
type=
"primary"
>
禁用状态
</nut-button>
<nut-button
plain
disabled
type=
"info"
>
禁用状态
</nut-button>
<nut-button
plain
disabled
type=
"primary"
>
禁用状态
</nut-button>
</div>
<div
class=
"title"
>
按钮形状
</div>
<div
class=
"demo-button-row2"
>
<nut-button
shape=
"square"
type=
"primary"
>
方形按钮
</nut-button>
<nut-button
type=
"info"
>
圆形按钮
</nut-button>
</div>
<div
class=
"title"
>
加载状态
</div>
<div
class=
"title"
>
图标按钮
</div>
<div
class=
"title"
>
按钮尺寸
</div>
<nut-button
block
type=
"primary"
>
通栏按钮
</nut-button>
<nut-button>
普通按钮
</nut-button>
<nut-button>
小型按钮
</nut-button>
<div
class=
"demo-button-row2"
>
<div
class=
"demo-button-row2"
>
<nut-button
block
type=
"primary"
>
通栏按钮
</nut-button>
</div>
<div
class=
"demo-button-row2"
>
<nut-button
type=
"primary"
>
普通按钮
</nut-button>
<nut-button
size=
"small"
type=
"primary"
>
小型按钮
</nut-button>
</div>
</div>
</div>
</
template
>
...
...
src/packages/button/index.scss
浏览文件 @
1de30ddb
...
...
@@ -74,28 +74,38 @@
}
&
--plain
{
background
-color
:
$button-plain-background-color
;
background
:
$button-plain-background-color
;
&
.nut-button--primary
{
color
:
$button-primary-background-color
;
color
:
$button-primary-border-color
;
border-color
:
$button-primary-border-color
;
}
&
.nut-button--info
{
color
:
$button-info-border-color
;
border-color
:
$button-info-border-color
;
}
&
.nut-button--success
{
color
:
$button-success-background-color
;
color
:
$button-success-border-color
;
border-color
:
$button-success-border-color
;
}
&
.nut-button--danger
{
color
:
$button-danger-background-color
;
color
:
$button-danger-border-color
;
border-color
:
$button-danger-border-color
;
}
&
.nut-button--warning
{
color
:
$button-warning-background-color
;
color
:
$button-warning-border-color
;
border-color
:
$button-warning-border-color
;
}
}
&
--large
{
width
:
100%
;
height
:
$button-large-height
;
line-height
:
$button-large-line-height
;
}
&
--normal
{
...
...
@@ -105,6 +115,7 @@
&
--small
{
height
:
$button-small-height
;
line-height
:
$button-small-line-height
;
padding
:
0
$padding-xs
;
font-size
:
$font-size-1
;
}
...
...
src/packages/button/index.vue
浏览文件 @
1de30ddb
...
...
@@ -65,7 +65,9 @@ export default createComponent('button')({
[
`
${
prefixCls
}
--
${
type
.
value
}
`
]:
type
.
value
,
[
`
${
prefixCls
}
--
${
size
.
value
}
`
]:
size
.
value
,
[
`
${
prefixCls
}
--
${
shape
.
value
}
`
]:
shape
.
value
,
[
`
${
prefixCls
}
--block`
]:
block
.
value
[
`
${
prefixCls
}
--plain`
]:
plain
.
value
,
[
`
${
prefixCls
}
--block`
]:
block
.
value
,
[
`
${
prefixCls
}
--disabled`
]:
disabled
.
value
};
});
...
...
src/styles/variables.scss
浏览文件 @
1de30ddb
...
...
@@ -27,18 +27,21 @@ $font-weight-bold: 400;
// button
$button-border-radius
:
25px
;
$button-border-width
:
1px
;
$button-default-bg-color
:
#fff
;
$button-default-bg-color
:
$white
;
$button-default-border-color
:
rgba
(
204
,
204
,
204
,
1
);
$button-default-color
:
rgba
(
102
,
102
,
102
,
1
);
$button-small-height
:
28px
;
$button-default-height
:
38px
;
$button-large-height
:
48px
;
$button-large-line-height
:
46px
;
$button-small-line-height
:
26px
;
$button-block-height
:
48px
;
$button-default-line-height
:
36px
;
$button-block-line-height
:
46px
;
$button-default-font-size
:
$font-size-2
;
$button-disabled-opacity
:
0
.68
;
$button-primary-color
:
#fff
;
$button-primary-color
:
$white
;
$button-primary-border-color
:
rgba
(
250
,
44
,
25
,
1
);
$button-primary-background-color
:
linear-gradient
(
135deg
,
rgba
(
250
,
44
,
25
,
1
)
0%
,
...
...
@@ -46,9 +49,11 @@ $button-primary-background-color: linear-gradient(
rgba
(
250
,
89
,
25
,
1
)
83%
,
rgba
(
250
,
100
,
25
,
1
)
100%
);
$button-info-color
:
#fff
;
$button-info-color
:
$white
;
$button-info-border-color
:
rgba
(
73
,
106
,
242
,
1
);
$button-info-background-color
:
linear-gradient
(
315deg
,
rgba
(
73
,
143
,
242
,
1
)
0%
,
rgba
(
73
,
101
,
242
,
1
)
100%
);
$button-success-color
:
#fff
;
$button-success-color
:
$white
;
$button-success-border-color
:
rgba
(
38
,
191
,
38
,
1
);
$button-success-background-color
:
linear-gradient
(
135deg
,
rgba
(
38
,
191
,
38
,
1
)
0%
,
...
...
@@ -57,9 +62,11 @@ $button-success-background-color: linear-gradient(
rgba
(
41
,
212
,
70
,
1
)
100%
);
$button-danger-color
:
#fff
;
$button-danger-color
:
$white
;
$button-danger-border-color
:
rgba
(
250
,
44
,
25
,
1
);
$button-danger-background-color
:
rgba
(
250
,
44
,
25
,
1
);
$button-warning-color
:
#fff
;
$button-warning-color
:
$white
;
$button-warning-border-color
:
rgba
(
255
,
158
,
13
,
1
);
$button-warning-background-color
:
linear-gradient
(
135deg
,
rgba
(
255
,
158
,
13
,
1
)
0%
,
...
...
@@ -67,4 +74,4 @@ $button-warning-background-color: linear-gradient(
rgba
(
255
,
182
,
13
,
1
)
83%
,
rgba
(
255
,
190
,
13
,
1
)
100%
);
$button-plain-background-color
:
#fff
;
$button-plain-background-color
:
$white
;
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录