🔥 新プロジェクトのご紹介 t0ggles - 究極のプロジェクト管理ツール！ 🔥

メニューリスト Svelte コンポーネント

メニューリストはリストビューの拡張です。通常のリンクリストとは異なり、メニューリストはアプリの現在アクティブな画面（またはセクション）を示すように設計されています。タブバーのようなものですが、リスト形式です。

メニューリストのコンポーネント

以下のコンポーネントが含まれています

  • MenuList - メニューリストコンポーネント
  • MenuListItem - メニューリストアイテム要素

MenuList プロパティ

MenuList コンポーネントには固有のプロパティはありませんが、List コンポーネントを拡張しているため、すべての List プロパティをサポートしています。

MenuListItem プロパティ

MenuListItem コンポーネントは ListItem コンポーネントを拡張しており、すべての ListItem プロパティ、ListItem スロット、および以下の追加プロパティをサポートしています。

名前タイプデフォルト説明
activeboolean (真偽値)false (偽)

メニューリストアイテムをハイライト表示（アクティブ）します

hrefstring (文字列) | boolean (真偽値)

メニューリストアイテムリンクの href 属性

subtitle (サブタイトル)string (文字列)

メニューリストアイテムの「サブタイトル」エリアの内容

例

MenuList.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    MenuList,
    MenuListItem,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';


  let selected = 'home';
  let selectedMedia = 'home';
</script>


<Page>
  <Navbar title="Menu List" />


  <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>
  </Block>
  <MenuList>
    <MenuListItem
      title="Home"
      active={selected === 'home'}
      onClick={() => (selected = 'home')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Profile"
      active={selected === 'profile'}
      onClick={() => (selected = 'profile')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Settings"
      active={selected === 'settings'}
      onClick={() => (selected = 'settings')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
  </MenuList>


  <MenuList>
    <MenuListItem
      title="Home"
      subtitle="Home subtitle"
      active={selectedMedia === 'home'}
      onClick={() => (selectedMedia = 'home')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Profile"
      subtitle="Profile subtitle"
      active={selectedMedia === 'profile'}
      onClick={() => (selectedMedia = 'profile')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Settings"
      subtitle="Settings subtitle"
      active={selectedMedia === 'settings'}
      onClick={() => (selectedMedia = 'settings')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
  </MenuList>
</Page>
コードのライセンス MIT.
2022 © Konsta UI by nolimits4web.