Mint UI 索引列表-Index List

2021-09-06 15:14 更新
索引列表,可由右側(cè)索引導(dǎo)航快速定位到相應(yīng)的內(nèi)容。

引入

import { IndexList, IndexSection } from 'mint-ui';

Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);

例子

<mt-index-list>
  <mt-index-section index="A">
    <mt-cell title="Aaron"></mt-cell>
    <mt-cell title="Alden"></mt-cell>
    <mt-cell title="Austin"></mt-cell>
  </mt-index-section>
  <mt-index-section index="B">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
  ...
  <mt-index-section index="Z">
    <mt-cell title="Zack"></mt-cell>
    <mt-cell title="Zane"></mt-cell>
  </mt-index-section>
</mt-index-list>

?mt-index-section? 與右側(cè)導(dǎo)航中的索引一一對應(yīng),?mt-index-section? 的 ?index ?屬性即為與其對應(yīng)的索引的顯示文本。?mt-index-section? 標簽內(nèi)可為任意自定義內(nèi)容。

當(dāng)手指在右側(cè)導(dǎo)航中滑動時,會在列表中間顯示一個目前索引值的提示符。若不需要提示符,只需將 ?show-indicator? 設(shè)為 ?false?

<mt-index-list :show-indicator="false">
  ...
</mt-index-list>

API

mt-index-list

參數(shù) 說明 類型 可選值 默認值
height 組件的高度。若不指定,則自動延伸至視口底 Number
showIndicator 是否顯示索引值提示符 Boolean true

mt-index-section

參數(shù) 說明 類型 可選值 默認值
index 索引值(必需參數(shù)) String

Slot

mt-index-list

name 描述
- 一個或多個 mt-index-section 組件

mt-index-section

name 描述
- 單個 mt-index-section 的內(nèi)容


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號