Вкладка Ionic

Вкладки Ionic — это горизонтально расположенные кнопки или ссылки, используемые для переключения между страницами. Они могут содержать комбинацию текста и иконок и являются популярным способом навигации на мобильных устройствах.

Контейнер вкладок ниже использует класс tabs, а каждая вкладка использует класс tab-item. По умолчанию вкладки содержат только текст и не имеют иконок.

Примеры

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

По умолчанию вкладка имеет стандартный цвет. Можно задать следующие различные цветовые стили: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

Чтобы скрыть панель вкладок, можно использовать класс tabs-item-hide.

Вкладки с иконками

Добавление класса tabs-icon-only после класса tabs настроит вкладки на отображение только значков.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

Вкладки со значком сверху + текст

Добавление класса tabs-icon-top после класса tabs настроит вкладки со значком сверху + текст.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="../index.html">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Вкладки со значком слева + текст

Добавление класса tabs-icon-left после класса tabs настроит вкладки со значком слева + текст.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Вкладки в полосатом стиле

Вы можете добавить tabs-striped к элементу с классом стиля tabs, чтобы получить вкладки в стиле Android. Вы также можете добавить tabs-top, чтобы разместить вкладки в верхней части страницы.

Цветами полосатых вкладок можно управлять с помощью tabs-background-{color} и tabs-color-{color}. Значением {color} может быть: default, light, stable, positive, calm, balanced, energized, assertive, royal или dark.

Примечание: Если вы хотите задать заголовок шапки на вкладках, вам нужно использовать класс has-tabs-top.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

Результат выполнения выглядит так:

Другие расширения