Beside default usage, you could customise the content of each item as required by inserting your custom DOM into the slot of `cube-index-list-item` as shown below. And please don't modify the usage of `cube-index-list-group` and `cube-index-list-item` unless you really know what you are doing.
```html
<cube-index-list:data="cityData">
<cube-index-list-group
v-for="(group, index) in cityData"
:key="index"
:group="group">
<cube-index-list-item
v-for="(item, index) in group.items"
:key="index"
:item="item"
@select="selectItem">
<divclass="custom-item">I am the custom {{item.name}}</div>
</cube-index-list-item>
</cube-index-list-group>
</cube-index-list>
```
```javascript
exportdefault{
data(){
return{
cityData:cityData
}
},
methods:{
selectItem(item){
console.log(item.name)
},
clickTitle(title){
console.log(title)
}
}
}
```
```stylus
// Style of the custom item.
.custom-item
position: relative
height: 70px
line-height: 70px
padding: 0 16px
font-size: $fontsize-medium
// Use custom style to cover default style.
.cube-index-list-content
background-color: #222
color: #909090
.cube-index-list-anchor
background-color: #333
height: 30px
line-height: 30px
padding: 0 0 0 20px
.cube-index-list-nav
padding: 20px 0
border-radius: 10px
background: rgba(0,0,0,.3)
>ul
>li
padding: 3px
font-size: 12px
color: #909090
&.active
color: #ffcd32
```
### Props configuration
| Attribute | Description | Type | Default |
| - | - | - | - |
| title | title | String | - |
| data | data to be displayed | Array | [] |
| speed | when click the navigator, the transition time of scrolling to the specific anchor (unit: ms). | number | 0 |
