🔥 認識我們的新專案 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 by nolimits4web.