🔥 隆重推出我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

選單列表 Svelte 組件

選單列表是 列表視圖 的擴展。與一般的連結列表不同，選單列表旨在指示應用程式目前活動的螢幕（或區段）。可以將其視為 標籤列，但以列表的形式呈現。

選單列表組件

包含以下組件

  • MenuList - 選單列表組件
  • MenuListItem - 選單列表項目元素

MenuList Props

MenuList 組件沒有特定的 props，但由於它擴展了 List 組件，因此它支援所有 List props

MenuListItem Props

MenuListItem 組件擴展了 ListItem 組件，它支援所有 ListItem props、ListItem slots 以及以下額外的 props

名稱類型預設值描述
active布林值false

使選單列表項目反白顯示（活動中）

href字串 | 布林值

選單列表項目連結的 href 屬性

subtitle字串

選單列表項目「副標題」區域的內容

範例

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 由 nolimits4web.