メニューリスト

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

メニューリストのレイアウト

それでは、リストビューのメニューリストのレイアウト構造を見てみましょう。

<div class="list menu-list">
  <ul>
    <li>
      <a href="#" class="item-content item-link item-selected">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>

構造

menu-list - メニューリストの表示を有効にするために、Listに追加しなければならないクラスです。
- item-selected - メニューリストのアイテムに追加されるクラスで、現在アクティブなアイテムであることを示します。

Example

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Menu List</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block 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>
      </div>
      <div class="list menu-list">
        <ul>
          <li>
            <a
              href="#"
              class="item-content item-link ${selected === 'home' ? 'item-selected' : ''}"
              @click=${()=> setItem('home')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Home</div>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="item-content item-link ${selected === 'profile' ? 'item-selected' : ''}"
              @click=${()=> setItem('profile')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Profile</div>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="item-content item-link ${selected === 'settings' ? 'item-selected' : ''}"
              @click=${()=> setItem('settings')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Settings</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list media-list menu-list">
        <ul>
          <li>
            <a
              href="#"
              class="item-content item-link ${selectedMedia === 'home' ? 'item-selected' : ''}"
              @click=${()=> setItemMedia('home')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Home</div>
                </div>
                <div class="item-subtitle">Home subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="item-content item-link ${selectedMedia === 'profile' ? 'item-selected' : ''}"
              @click=${()=> setItemMedia('profile')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Profile</div>
                </div>
                <div class="item-subtitle">Profile subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="item-content item-link ${selectedMedia === 'settings' ? 'item-selected' : ''}"
              @click=${()=> setItemMedia('settings')}
            >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Settings</div>
                </div>
                <div class="item-subtitle">Settings subtitle</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let selected = 'home';
    let selectedMedia = 'home';

    const setItem = (newItem) => {
      selected = newItem;
      $update();
    }
    const setItemMedia = (newItem) => {
      selectedMedia = newItem;
      $update();
    }
    return $render;
  }
</script>