Button 按钮
颜色
类型

状态
大小
大小
segment 分段
基本用法

- 分段一
- 分段二

- 分段一
- 分段二
- 分段三

自定义宽度

- 年
- 月
- 日

tab 页签
基本用法
页签一
页签二
页签三
页签内容一
页签内容二
页签内容三
动画
页签一
页签二
页签三
页签内容一
页签内容二
页签内容三
超出屏幕宽度（5个）
页签内容一
页签内容二
页签内容三
searchBar 搜索栏
基本用法
搜索
取消
获取到光标
获取到光标
取消
输入状态
输入中
取消
input 输入框
基本用法
带清除
获取焦点
右对齐
禁用
在列表内
基本资料，单行与左对齐
普通键盘
数字键盘
支付信息右对齐
银行卡
密码
手机号码
标题可自定为icon，图片或文字
年龄
支付订单
数量
￥
价格
元
多行输入
高度自适应
13/100
radio-checkbox 单复选
基本用法
单选 复选
禁用
单选 复选
列表模式
列表标题
标题
内容文字
标题
我是说明我是说明我是说明我是说明我是说明
内容文字
标题
我是说明我是说明我是说明我是说明我是说明
内容文字
标题
我是说明我是说明我是说明我是说明我是说明
内容文字
switch 开关
基本用法
列表模式
列表标题
标题
标题
我是说明我是说明我是说明我是说明我是说明
标题
我是说明我是说明我是说明我是说明我是说明
list 列表
基本用法
列表标题
标题
内容文字
副标题
列表标题
标题
我是副标题我的文字长度可以完全显示且会发生宽度变化
内容文字
固定宽度 The Best Photo Printer
这是文字长度具有白色渐变遮罩
带图标
列表标题
A
列表标题
A
列表标题
我是说明我是说明我是说明我是说明我是说明我是说明我是说明
右侧内容垂直对齐方式
列表标题
标题
我是副标题我的文字长度可以完全显示且会发生宽度变化
内容文字
固定宽度 The Best Photo Printer
这是文字长度具有白色渐变遮罩
10:30
picker 选择器
取消
选择地址
确定
安徽省
澳门特别行政区
湖南
北京
浙江
长沙市
株洲市
郴州市
衡阳市
岳阳市
永州市
县城
县城
县城
县城
县城
县城
picker 选择器
取消
选择日期
确定
年
2014
2014
2015
2016
2017
2018
月
02
03
04
05
06
07
日
01
02
03
04
05
06
form 表单
校验
姓名
姓名
生日
年龄
列表表单
数量
￥
标题
选择地区
湖南省,郴州市,县城
日期
2015-09-09
alert 通知
基本用法
默认提示信息
带情景图标
success提示信息
warning提示信息
danger提示信息
info提示信息
带操作
操作为文本
不再提示
操作为图标
alert 通知
this is a toast
this is a toast
this is a toast
this is a toast
this is a toast
modal 弹出框

#### 标题

确定删除吗？

#### 标题

确定删除吗？

#### 登陆

请输入用户名和密码

image-picker 图片上传

badge 徽标
基本用法
标签 NEW 标签 标签 券 66
边框
标签 NEW 标签 标签 券 标签
圆角
66
定位在上方
6
红点
badge 徽标
基本用法
自定义颜色
禁用
双控制滑块
带图标滑块
阶段滑块
accordion 手风琴
基本用法
标题一
子标题
子标题
子标题
标题一

文本内容文本内容文本内容文本内容文本内容文本内容文本内容

标题一

文本内容文本内容文本内容文本内容文本内容文本内容文本内容

drawer 抽屉

从左侧滑出

从右侧滑出

从上方滑出

从下方滑出

stepper 步进器
标题
步进按钮禁用
禁用
progress 进度条
基本用法
20%
加载完成
加载失败
steps 步骤
基本用法
Finished
2
In Progress
3
Waiting
4
Waiting
带描述
Finished
this is description
2
error
this is description
3
Waiting
this is description
4
Waiting
this is description
自定义图标
Finished
In Progress
Waiting
Waiting
垂直方向步骤
Finished
this is description this is description this is description this is description
2
In Progress
this is description
3
Waiting
this is description
4
Waiting
this is description
carousel 轮播
基本用法

cell 宫格
基本用法
item
item
item
item
item-tap
item
item
item
item
timeline 时间轴

- 五帝时期
  禅让
- 夏朝
  鲧禹治水
- 商朝
  商汤灭夏
- 周朝
  西周 东周
- 秦朝
  秦灭六国

table 表格

标题
标题
标题
标题

标题 | 单元格 | 单元格 | 单元格 | 单元格 | 操作
标题 | 单元格 | 单元格 | 单元格 | 单元格 | 操作
标题 | 单元格 | 单元格 | 单元格 | 单元格 | 操作
标题 | 单元格 | 单元格 | 单元格 | 单元格 | 操作

操作
操作
操作
操作

loading 加载
指示器为圆形
指示器为点状
带文本
加载中...
指示器与文本垂直
加载中...
card 卡片
基本用法

###### 标题文字

没有头部
组合列表
标题
A
标题
A
list
固定宽度 The Best Photo Printer
这是文字长度具有白色渐变遮罩
带图标list
A
小标题
标题文字
load-and-refresh 下拉刷新，上拉加载
下拉刷新

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

下拉刷新-刷新中
刷新中

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

下拉刷新-成功
已完成

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

上拉加载

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

上拉加载中

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

加载中...
swipe 滑动
基本用法
标题
内容文字
显示左边按钮
标题
内容文字
显示右边按钮
标题
内容文字

- 首页

- 首页

- 首页

- 首页