🔥 新しいプロジェクトのご紹介 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.