🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具！ 🔥

菜单列表 Vue 组件

菜单列表是 列表视图 的扩展。与通常的链接列表不同，菜单列表旨在指示应用程序的当前活动屏幕（或部分）。将其视为类似于 标签栏，但以列表形式呈现。

菜单列表组件

包含以下组件：

  • MenuList - 菜单列表组件
  • MenuListItem - 菜单列表项元素

MenuList 属性

MenuList 组件没有特定属性，但由于它扩展了 List 组件，因此它支持所有 List 属性

MenuListItem 属性

MenuListItem 组件扩展了 ListItem 组件，它支持所有 ListItem 属性，ListItem 插槽 以及以下附加属性：

名称类型默认值描述
active布尔值false

使菜单列表项突出显示（活动）

href字符串 | 布尔值

菜单列表项链接的 href 属性

subtitle字符串

菜单列表项“子标题”区域的内容

示例

MenuList.vue
<template>
  <k-page>
    <k-navbar title="Menu List" />


    <k-block strong>
      <p>
        Menu list unlike usual links list is designed to indicate currently
        active screen (or section) of your app. Think about it like a Tabbar but
        in a form of a list.
      </p>
    </k-block>
    <k-menu-list>
      <k-menu-list-item
        title="Home"
        :active="selected === 'home'"
        @click="() => (selected = 'home')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
      <k-menu-list-item
        title="Profile"
        :active="selected === 'profile'"
        @click="() => (selected = 'profile')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
      <k-menu-list-item
        title="Settings"
        :active="selected === 'settings'"
        @click="() => (selected = 'settings')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
    </k-menu-list>


    <k-menu-list>
      <k-menu-list-item
        title="Home"
        subtitle="Home subtitle"
        :active="selectedMedia === 'home'"
        @click="() => (selectedMedia = 'home')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
      <k-menu-list-item
        title="Profile"
        subtitle="Profile subtitle"
        :active="selectedMedia === 'profile'"
        @click="() => (selectedMedia = 'profile')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
      <k-menu-list-item
        title="Settings"
        subtitle="Settings subtitle"
        :active="selectedMedia === 'settings'"
        @click="() => (selectedMedia = 'settings')"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-menu-list-item>
    </k-menu-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kMenuList,
    kMenuListItem,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kMenuList,
      kMenuListItem,
      DemoIcon,
    },
    setup() {
      const selected = ref('home');
      const selectedMedia = ref('home');
      return {
        selected,
        selectedMedia,
      };
    },
  };
</script>
代码许可证： MIT.
2022 © Konsta UI 由 nolimits4web.