Minimalist UI

Tabs 标签页

引入组件

<template>
  <m-tabs :selected.sync="selected">
    <m-tabs-head>
      <m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
      <m-tabs-item name="idol">偶像</m-tabs-item>
      <m-tabs-item name="inference">推理</m-tabs-item>
    </m-tabs-head>
    <m-tabs-body>
      <m-tabs-pane name="dayToDay">今日的风儿好喧嚣啊 </m-tabs-pane>
      <m-tabs-pane name="idol">为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！</m-tabs-pane>
      <m-tabs-pane name="inference">赌上爷爷的名义</m-tabs-pane>
    </m-tabs-body>
  </m-tabs>
</template>

<script>
  import { MTabs, MTabsHead, MTabsBody, MTabsItem, MTabsPane } from "@csr/m_ui";

  export default {
    components: {
      MTabs,
      MTabsHead,
      MTabsBody,
      MTabsItem,
      MTabsPane
    },
    data() {
      return {
        selected: 'dayToDay'
      }
    }
  }
</script>

基础用法

搞笑/日常 偶像 推理

今日的风儿好喧嚣啊

为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！

赌上爷爷的名义
代码
<m-tabs :selected.sync="selected">
  <m-tabs-head>
    <m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
    <m-tabs-item name="idol">偶像</m-tabs-item>
    <m-tabs-item name="inference">推理</m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane name="dayToDay">
      <p>今日的风儿好喧嚣啊</p>
    </m-tabs-pane>
    <m-tabs-pane name="idol">
      <p>为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！</p>
    </m-tabs-pane>
    <m-tabs-pane name="inference">
      <p>赌上爷爷的名义</p>
    </m-tabs-pane>
  </m-tabs-body>
</m-tabs>

<script>
  export default {
    data() {
      return {
        selected: 'dayToDay'
      }
    }
  }
</script>

自定义选项卡

搞笑/日常 偶像 推理 今日的风儿好喧嚣啊 为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！ 赌上爷爷的名义
代码
<m-tabs :selected.sync="selected">
  <m-tabs-head>
    <m-tabs-item name="dayToDay">
      <m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-dog"></use></svg></m-icon>
      搞笑/日常
    </m-tabs-item>
    <m-tabs-item name="idol">
      <m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-tv"></use></svg></m-icon>
      偶像
    </m-tabs-item>
    <m-tabs-item name="inference">
      <m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-baozou"></use></svg></m-icon>
      推理
    </m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane name="dayToDay">今日的风儿好喧嚣啊 </m-tabs-pane>
    <m-tabs-pane name="idol">为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！</m-tabs-pane>
    <m-tabs-pane name="inference">赌上爷爷的名义</m-tabs-pane>
  </m-tabs-body>
</m-tabs>

<script>
  export default {
    data() {
      return {
        selected: 'dayToDay'
      }
    }
  }
</script>

禁用选项卡

搞笑/日常 偶像 推理

今日的风儿好喧嚣啊

为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！

赌上爷爷的名义
代码
<m-tabs :selected.sync="selected">
  <m-tabs-head>
    <m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
    <m-tabs-item name="idol" disabled>偶像</m-tabs-item>
    <m-tabs-item name="inference">推理</m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane name="dayToDay">
      <p>今日的风儿好喧嚣啊</p>
    </m-tabs-pane>
    <m-tabs-pane name="idol">
      <p>为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！</p>
    </m-tabs-pane>
    <m-tabs-pane name="inference">
      <p>赌上爷爷的名义</p>
    </m-tabs-pane>
  </m-tabs-body>
</m-tabs>

<script>
  export default {
    data() {
      return {
        selected: 'dayToDay'
      }
    }
  }
</script>

超多选项卡

搞笑/日常 偶像 推理 恋爱/情感 机战 热血/冒险 体育/棋牌 魔法少女 游戏台词

今日的风儿好喧嚣啊

为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！

赌上爷爷的名义

在虚构的故事当中寻求真实感的人脑袋一定有问题

只要打不中就没有什么大不了

没有人能在我的BGM里打败我

教练，我想打篮球

和我签订契约，成为魔法少女吧

我不是萝莉控，只是喜欢的人刚好是萝莉而已！
代码
<m-tabs :selected.sync="selected">
  <m-tabs-head>
    <m-tabs-item v-for="item in tablist" :key="item.id" :name="item.name">
      {{ item.title }}
    </m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane v-for="item in tablist" :key="item.id" :name="item.name">
      <p>{{ item.content }}</p>
    </m-tabs-pane>
  </m-tabs-body>
</m-tabs>

<script>
export default {
  data() {
    return {
      selected: 'dayToDay',
      tablist: [
        { id: 1, name: 'dayToDay', title: '搞笑/日常', content: '今日的风儿好喧嚣啊'},
        { id: 2, name: 'idol', title: '偶像', content: '为了保护心爱的学园都市，科学家们决定让七名LV5站出来……成为偶像！'},
        { id: 3, name: 'inference', title: '推理', content: '赌上爷爷的名义'},
        { id: 4, name: 'love', title: '恋爱/情感', content: '在虚构的故事当中寻求真实感的人脑袋一定有问题'},
        { id: 5, name: 'machineWar', title: '机战', content: '只要打不中就没有什么大不了'},
        { id: 6, name: 'blood', title: '热血/冒险', content: '没有人能在我的BGM里打败我'},
        { id: 7, name: 'sports', title: '体育/棋牌', content: '教练，我想打篮球'},
        { id: 8, name: 'magicalGirl', title: '魔法少女', content: '和我签订契约，成为魔法少女吧 '},
        { id: 9, name: 'game', title: '游戏台词', content: ' 我不是萝莉控，只是喜欢的人刚好是萝莉而已！'}
      ]
    }
  }
}
</script>

API

MTabs

属性说明类型默认值
selected 选中的选项卡name，必传。可以使用.sync修饰符 string | number

MTabsItem

属性说明类型默认值
name 选项卡标识，必传，该属性的值唯一。 string | number
disable 是否禁用 boolean false

MTabsPane

属性说明类型默认值
name 面板标识，和对应的选项卡name相同 string | number

事件

事件名 说明 回调参数
on-click 点击选项卡时触发 (name: string | number)
update:selected 选项卡选中时触发
<m-tabs :selected.sync="selected">...</m-tabs>
<m-tabs :selected="selected" @update:selected="selected = $event">...</m-tabs>
(name: string | number)

← Popover 气泡卡片 →