Skip to main content

Список меню

Навігація

Список меню

Список меню є розширенням перегляду списку. Список меню, на відміну від звичайного списку посилань, призначений для вказівки поточного активного екрана (або розділу) вашого застосунку. Подумайте про це як про Tabbar, але у формі списку.

Макет списку меню

Подивімось на структуру макета списків меню у ваших переглядах списків:
<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 - додатковий клас, який необхідно додати до списку, щоб увімкнути відображення списку меню

○ item-selected -додатковий клас додав пункт списку меню, щоб вказати, що це наразі активний пункт

Приклад 

<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>Список меню, на відміну від звичайного списку посилань, призначений для вказівки поточного активного екрана (або розділу) вашої програми. Подумайте про це як про Tabbar, але у формі списку.</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 t4-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 t4-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 t4-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 t4-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 t4-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 t4-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>

Techno4 Framework