List（列表）
列表组件非常常见，和Item组件配合使用
功能丰富
引入
import {List, Item} from 'sinoiov-ui'
Vue.component(List.name, List)
Vue.component(Item.name, Item)
代码示例
基本用法
基本用法
item1
item2
item3
可点击样式
设置is-link属性为true, 列表右侧会有个向右的箭头，点击后会有交互效果。is-link为boolean值，默认为false
item1
item2
查看Icon组件
item3
二级列表
设置is-accordion属性为true, 通过名为accordion的slot指定子列表
北京市
海淀区
昌平区
东城区
智能化布局
title,subtitle,content,value,note等多个属性来快速完成布局，同时也可以通过同名的slot自定义。value和note一般不要同时使用。
value和note的区别在于：value始终垂直居中，而note始终显示在右上（下）角，当内容超过1行时，两者差异会明显
图文列表
可以在列表中展示头像，缩略图或者其他任何图片，就像微信聊天一样。Item组件上有icon-type和icon-position两个常用来控制图片样式的属性（还有其他一些属性，详见最下方api）。icon-type主要控制图片的类型，实际为控制图片的大小，有avatar,thumbnail,icon三种取值，默认为空字符，分别表示头像、缩略图和字体图标；icon-position控制图片位置，有left和right两种取值，默认为left。
自定义icon样式
如果icon-type不能满足您的需求，此时可通过icon-style属性自定义icon的样式。值为对象或者可以解析为对象的字符串，对象的属性为css的属性。
列表分隔符
is-divider为true，即可显示一个分隔符
城市
北京
上海
爱好
台球
编程
滑动触发列表项菜单
添加slidable属性，或设置值为true，则可以使列表滑动。同时需要向options属性传入一个对象数组。对象有以下三个属性：text,style,handler。
text表示按钮的文字，style表示按钮的CSS样式对象，handler表示点击按钮后的回调函数，函数有一个参数，参数为当前按钮所在的Item组件的对象。例子中调用了Item组件的remove()方法，可以方便的实现删除功能。
上海
北京
export default {
data () {
let _this = this
return {
options1: [
{
text: '删除',
handler (item) {
_this.$dialog.confirm('确定删除吗？').then(() => {
item.remove()
}).catch(() => {})
}
}
],
options2: [
{
text: '删除',
handler (item) {
_this.$dialog.confirm('确定删除吗？').then(() => {
item.remove()
}).catch(() => {})
}
}
]
}
}
}