List

// 引入
import List from 'vimo/lib/list'
import { ListHeader, ItemGroup, Item, ItemDivider } from 'vimo/lib/item'
// 安装
Vue.component(List.name, List)
Vue.component(ListHeader.name, ListHeader)
Vue.component(ItemGroup.name, ItemGroup)
Vue.component(Item.name, Item)
Vue.component(ItemDivider.name, ItemDivider)
// 或者
export default{
  components: {
   List, ListHeader, ItemGroup, Item, ItemDivider
 }
}

源码:

• components/list/list.vue , line 2

参考:

• component:Item
• component:ListHeader

传入属性 / Props:

对外事件 / Fires:

• component:List#event:onChange

用法 / Usages

<!--普通使用-->
<template>
   <vm-page>
       <vm-header>
           <vm-navbar>
               <vm-title>List</vm-title>
           </vm-navbar>
        </vm-header>
       <vm-content class="outer-content">
           <vm-list>
               <!--header-->
               <vm-list-header>
                   Contents
               </vm-list-header>
               <!--group-->
               <vm-item-group>
                   <vm-item button to="list.listForAll">ListForAll</vm-item>
                   <vm-item button :to="{name:'list.basicList'}">BasicList</vm-item>
                   <vm-item button :to="{name:'list.noLine'}">NoLine</vm-item>
                   <vm-item button :to="{name:'list.insetList'}">InsetList</vm-item>
                   <vm-item button :to="{name:'list.listDividers'}">ListDividers</vm-item>
                   <vm-item button :to="{name:'list.listHeaders'}">listHeaders</vm-item>
                   <vm-item button :to="{name:'list.iconList'}">IconList</vm-item>
                   <vm-item button :to="{name:'list.avatarList'}">AvatarList</vm-item>
                   <vm-item button :to="{name:'list.multi-lineList'}">Multi-lineList</vm-item>
                   <vm-item button :to="{name:'list.slidingList'}">SlidingList</vm-item>
                   <vm-item button :to="{name:'list.reorder'}">Reorder</vm-item>
                   <vm-item button :to="{name:'list.thumbnailList'}">ThumbnailList</vm-item>
               </vm-item-group>
           </vm-list>
       </vm-content>
   </vm-page>
</template>

<!--多列布局(两列三行)-->
<vm-list>
   <vm-list-header>
       <span>today</span>
   </vm-list-header>
   <vm-item>
       <vm-avatar slot="item-start">
           <img src="./img/avatar-ts-woody.png">
       </vm-avatar>
       <vm-label>
           <h2>Woody</h2>
           <h3>Hello world</h3>
           <h4>This is third line</h4>
           <p>This town ain't big enough for the two of us!</p>
       </vm-label>
   </vm-item>
   <vm-item>
       <vm-avatar slot="item-start">
           <img src="./img/avatar-ts-buzz.png">
       </vm-avatar>
       <vm-label>
           <h2>Buzz Lightyear</h2>
           <h3>Hello world</h3>
           <p>My eyeballs could have been sucked from their sockets!</p>
       </vm-label>
   </vm-item>
</vm-list>

<!--Radio-->
<vm-list radio-group v-model="fruits" :disabled="isListDisabled" @onChange="onChangeHandler">
   <vm-list-header>Fruits</vm-list-header>
   <vm-item>
       <vm-label>Apple</vm-label>
       <vm-radio value="apple" :disabled="isAppleDisabled" @onSelect="onSelectHandler"></vm-radio>
   </vm-item>
   <vm-item>
       <vm-label>Banana</vm-label>
       <vm-radio value="banana" color="danger" @onSelect="onSelectHandler"></vm-radio>
   </vm-item>
   <vm-item>
       <vm-label>Cherry (secondary color)</vm-label>
       <vm-radio value="cherry" color="secondary" @onSelect="onSelectHandler"></vm-radio>
   </vm-item>
   <vm-item>
       <vm-label>Disabled</vm-label>
       <vm-radio value="disabled" :disabled="true" @onSelect="onSelectHandler"></vm-radio>
   </vm-item>
   <vm-item>
       <vm-label>Default</vm-label>
       <vm-radio value="default" @onSelect="onSelectHandler"></vm-radio>
   </vm-item>
</vm-list>