菜单指南规范组件资源
子菜单安装快速上手更新日志按钮 Button面包屑 Breadcrumb头像 Avatar提示框 Tooltip菜单 Menu消息框 Message多选框 Checkbox标签页 Tabs分页 Pagination日期选择器 Datepicker对话框 Modal步骤条 Steps表单 Form图标 Icon输入框 Input表格 Table

按钮

基础用法

基础的按钮用法。

1
2
3
4
5
6
7
8
9
<button class="woui-btn woui-btn-red">
  主要按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-red">
  次要按钮
</button>    
<button class="woui-btn woui-btn-text woui-btn-red">
  文字按钮
</button>

禁用状态

按钮不可用状态。

1
2
3
4
5
6
7
8
9
<button class="woui-btn woui-btn-red is-disabled">
  主要按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-red is-disabled">
  次要按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-red is-disabled">
  文字按钮
</button>

有颜色倾向

不同的颜色倾向代表不同的提示。

默认显示颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button class="woui-btn">
  默认按钮
</button>
<button class="woui-btn woui-btn-blue">
  蓝色按钮
</button>
<button class="woui-btn woui-btn-green">
  绿色按钮
</button>
<button class="woui-btn woui-btn-orange">
  橙色按钮
</button>
<button class="woui-btn woui-btn-red">
  红色按钮
</button>
<button class="woui-btn woui-btn-purple">
  紫色按钮
</button>

hover显示颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button class="woui-btn woui-btn-basic">
  默认按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-blue">
  蓝色按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-green">
  绿色按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-orange">
  橙色按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-red">
  红色按钮
</button>
<button class="woui-btn woui-btn-basic woui-btn-purple">
  紫色按钮
</button>

文字显示颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button class="woui-btn woui-btn-text">
  默认按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-blue">
  蓝色按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-green">
  绿色按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-orange">
  橙色按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-red">
  红色按钮
</button>
<button class="woui-btn woui-btn-text woui-btn-purple">
  紫色按钮
</button>

图标按钮

带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。

1
2
3
4
5
6
7
8
9
10
11
<button class="woui-btn woui-btn-primary woui-btn-red">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-primary woui-btn-red">
  <i class="woui-icon icon-add"></i>
  文件
</button>
<button class="woui-btn woui-btn-primary woui-btn-red">
  文件
  <i class="woui-icon icon-add"></i>
</button>

圆形按钮

圆形按钮内置图标。

1
2
3
4
5
6
7
8
9
10
11
12
<button class="woui-btn woui-btn-circle woui-btn-red">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-basic woui-btn-red">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-red is-disabled">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-basic woui-btn-red is-disabled">
  <i class="woui-icon icon-add"></i>
</button>

按钮大小

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。



1
2
3
4
5
6
7
8
9
10
11
12
<button class="woui-btn woui-btn-red woui-btn-mini">
  迷你按钮
</button>
<button class="woui-btn woui-btn-red woui-btn-small">
  小型按钮
</button>
<button class="woui-btn woui-btn-red">
  正常按钮
</button>
<button class="woui-btn woui-btn-red woui-btn-large">
  大型按钮
</button>
1
2
3
4
5
6
7
8
9
10
11
12
<button class="woui-btn woui-btn-circle woui-btn-red woui-btn-mini">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-red woui-btn-small">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-red">
  <i class="woui-icon icon-add"></i>
</button>
<button class="woui-btn woui-btn-circle woui-btn-red woui-btn-large">
  <i class="woui-icon icon-add"></i>
</button>

按钮组

以按钮组的方式出现，常用于多项类似操作。

横向按钮组

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="woui-btn-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="woui-btn-group">
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="woui-btn-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add is-left"></i>
    文件
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    文件
    <i class="woui-icon icon-add is-right"></i>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="woui-btn-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-vertical"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
</div>

竖直按钮组

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="woui-btn-vertical-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    主要按钮
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="woui-btn-vertical-group">
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
  <button class="woui-btn woui-btn-basic woui-btn-red">
    次要按钮
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="woui-btn-vertical-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add is-left"></i>
    文件
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    文件
    <i class="woui-icon icon-add is-right"></i>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="woui-btn-vertical-group">
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
  <i class="line-horizontal"></i>
  <button class="woui-btn woui-btn-primary woui-btn-red">
    <i class="woui-icon icon-add"></i>
  </button>
</div>
  1. 按钮
    1. 基础用法
    2. 禁用状态
    3. 有颜色倾向
      1. 默认显示颜色
      2. hover显示颜色
      3. 文字显示颜色
    4. 图标按钮
    5. 圆形按钮
    6. 按钮大小
    7. 按钮组
      1. 横向按钮组
      2. 竖直按钮组

WoUI 1.0 Alpha Version

Powered By 联通支付用户体验设计中心