Alert


Hint


Dialog


ToolTip


ContextMenu

Name Age Gender
{{student.name}} {{student.age}} {{student.gender}}

Checkbox


日历

one day in Teletubbies land: {{ctrl.year}} - {{ctrl.month}} - {{ctrl.date}}
日历限定选择范围

日期选择

{{ctrl.oneDay | date: 'yyyy-MM-dd'}}
{{ctrl.anotherDay | date: 'yyyy-MM-dd HH:mm:ss'}}

时钟


数字输入


滑动选择器

一个简单的滑动选择器
绑定一个值value:{{value}}
限定最大最小值
禁用

下拉选择

这里面可以有两种用法,一种是使用sn-dropdown,这是一个自定义属性,结构是固定的,然后,dropdown-menu这里面的部分可以更自由地定制,比如想要做成一个自定义的下拉菜单,每个点击有不同的操作,可以用这种。另外一种就是用于取代默认的select,这个可以使用sn-select来做。


树形下拉选择


分页


列表



数据表格

最简单的数据表格

单元格有多种条件,并且操作数据的数据表格

可排序数据表格

可排序数据表格简化写法

关联复选的数据表格

关联复选的数据表格