List

// 引入
import { List, ListHeader, ItemGroup, Item, ItemDivider } from 'vimo'
// 安装
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
 }
}

源码:

• list/list.vue , line 2

参考:

• component:Item

传入属性 / Props:

对外事件 / Fires:

• component:List#event:onChange

用法 / Usages

<!--普通使用-->
<template>
   <Page>
       <Header>
           <Navbar>
               <Title>List</Title>
           </Navbar>
        </Header>
       <Content class="outer-content">
           <List>
               <!--header-->
               <ListHeader>
                   <span>Contents</span>
               </ListHeader>
               <!--group-->
               <ItemGroup>
                   <Item button to="list.listForAll">ListForAll</Item>
                   <Item button :to="{name:'list.basicList'}">BasicList</Item>
                   <Item button :to="{name:'list.noLine'}">NoLine</Item>
                   <Item button :to="{name:'list.insetList'}">InsetList</Item>
                   <Item button :to="{name:'list.listDividers'}">ListDividers</Item>
                   <Item button :to="{name:'list.listHeaders'}">listHeaders</Item>
                   <Item button :to="{name:'list.iconList'}">IconList</Item>
                   <Item button :to="{name:'list.avatarList'}">AvatarList</Item>
                   <Item button :to="{name:'list.multi-lineList'}">Multi-lineList</Item>
                   <Item button :to="{name:'list.slidingList'}">SlidingList</Item>
                   <Item button :to="{name:'list.reorder'}">Reorder</Item>
                   <Item button :to="{name:'list.thumbnailList'}">ThumbnailList</Item>
               </ItemGroup>
           </List>
       </Content>
   </Page>
</template>

<!--多列布局(两列三行)-->
<List>
   <ListHeader>
       <span>today</span>
   </ListHeader>
   <Item>
       <Avatar slot="item-left">
           <img src="./img/avatar-ts-woody.png">
       </Avatar>
       <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>
       </Label>
   </Item>
   <Item>
       <Avatar slot="item-left">
           <img src="./img/avatar-ts-buzz.png">
       </Avatar>
       <Label>
           <h2>Buzz Lightyear</h2>
           <h3>Hello world</h3>
           <p>My eyeballs could have been sucked from their sockets!</p>
       </Label>
   </Item>
</List>

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