codecamp

Mint UI 索引列表-Index List

索引列表,可由右侧索引导航快速定位到相应的内容。

引入

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​ 与右侧导航中的索引一一对应,​mt-index-section​ 的 ​index ​属性即为与其对应的索引的显示文本。​mt-index-section​ 标签内可为任意自定义内容。

当手指在右侧导航中滑动时,会在列表中间显示一个目前索引值的提示符。若不需要提示符,只需将 ​show-indicator​ 设为 ​false

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

API

mt-index-list

参数 说明 类型 可选值 默认值
height 组件的高度。若不指定,则自动延伸至视口底 Number
showIndicator 是否显示索引值提示符 Boolean true

mt-index-section

参数 说明 类型 可选值 默认值
index 索引值(必需参数) String

Slot

mt-index-list

name 描述
- 一个或多个 mt-index-section 组件

mt-index-section

name 描述
- 单个 mt-index-section 的内容


Mint UI 日期时间选择器-Datetime Picker
Mint UI 调色板按钮-Palette Button
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }