選單清單 React 元件

選單清單並非一個獨立的元件，而只是使用 <List> 和 <ListItem> 元件的特殊情況。

要啟用選單清單，我們需要在 List 元件中加入 menuList prop，並透過在相關的 ListItem 上設定 selected prop 來控制目前選取的選單清單項目

範例

menu-list.jsx

import React, { useState } from 'react';
import { Page, Navbar, Block, List, ListItem, Icon } from 'framework7-react';

export default () => {
  const [selected, setSelected] = useState('home');
  const [selectedMedia, setSelectedMedia] = useState('home');
  return (
    <Page>
      <Navbar title="Menu List"></Navbar>

      <Block>
        <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>

      <List menuList outlineIos strongIos>
        <ListItem
          link
          title="Home"
          selected={selected === 'home'}
          onClick={() => setSelected('home')}
        >
          <Icon md="material:home" ios="f7:house_fill" slot="media" />
        </ListItem>
        <ListItem
          link
          title="Profile"
          selected={selected === 'profile'}
          onClick={() => setSelected('profile')}
        >
          <Icon md="material:person" ios="f7:person_fill" slot="media" />
        </ListItem>
        <ListItem
          link
          title="Settings"
          selected={selected === 'settings'}
          onClick={() => setSelected('settings')}
        >
          <Icon md="material:settings" ios="f7:gear_alt_fill" slot="media" />
        </ListItem>
      </List>

      <List menuList mediaList outlineIos strongIos>
        <ListItem
          link
          title="Home"
          subtitle="Home subtitle"
          selected={selectedMedia === 'home'}
          onClick={() => setSelectedMedia('home')}
        >
          <Icon md="material:home" ios="f7:house_fill" slot="media" />
        </ListItem>
        <ListItem
          link
          title="Profile"
          subtitle="Profile subtitle"
          selected={selectedMedia === 'profile'}
          onClick={() => setSelectedMedia('profile')}
        >
          <Icon md="material:person" ios="f7:person_fill" slot="media" />
        </ListItem>
        <ListItem
          link
          title="Settings"
          subtitle="Settings subtitle"
          selected={selectedMedia === 'settings'}
          onClick={() => setSelectedMedia('settings')}
        >
          <Icon md="material:settings" ios="f7:gear_alt_fill" slot="media" />
        </ListItem>
      </List>
    </Page>
  );
};

改善此文件