chlist

install

npm install ch-list --save

usage

import Vue from 'vue';
import ChList from 'ch-list'
Vue.use(ChList);

List Attributes

| Attribute | Type | Accepted Values | Description | Default | |:--: | :--: | -- | -- | :--:| | itemLayout | String | horizontal/vertical | The layout of list , default is horizontal, If a vertical list is desired, set the itemLayout property to vertical | horizontal | | customClass | String | | Add a custom class on list container | - | | header | String | | header string will inserted in header slot | - | | footer | String | | footer string will inserted in footer slot | - |

List Slot

| propName | Description | |:--:|--| | header | Slot which named header | | footer | Slot which named footer | | - | Default slot on list's content ,In general slot is list-items |

ListItem Attributes

| Attribute | Type | Accepted Values | Description | Default | |:-- | :--: | -- | -- | :--:| | content | String | | content string will inserted in content slot | - | | extra | String | | extra string will inserted in extra slot | - | | prefix | String | | prefix string will inserted in prefix slot | - | | actions | Array | [{name:'delete',op:'delete'}] | Loop render as actions slot | - | | layout | String | horizontal/vertical | The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical | horizontal | | customClass | String | | Add a custom class on list container | - | | haveHoveState | Boolean | | Whether there is floating state on the mouse float | false | | prefixalign | string | align-item all value | prefix's content layout | center |

ListItem Events

| eventName | Description | callback params | |:-- | :--: | -- | | actionClick | Callback executed when the action item is clicked,params is an item in prop actions | actionItem |

ListItem Slot

| propName | Description | |:--:|--| | - | Default slot on listItem's content | | prefix | listitem's prefix content | | extra | listitem's extra content,It is displayed at the end of listitem | | meta | listitem's meta content,In general slot is list-item-meta | | actions | The actions content of listitem. If layout is vertical, shows the content on bottom, otherwise shows content on the far right |

ListItemMeta Attributes

| Attribute | Type | Accepted Values | Description | Default | |:-- | :--: | -- | -- | :--:| | title | String/slot | | the title of list-item-meta | - | | description | String/slot | | the description of list-item-meta, shows the title on bottom, | - | | overflowEllipis | boolean | | | - |