ионная вкладка (закладка)

ионная вкладка (Tab) по горизонтали выровнен кнопки или ссылки для навигации между страницами переключения. Он может содержать сочетание текста и значков на мобильном устройстве является популярным способом навигации.

Используйте следующие Вкладки контейнера классы, каждая вкладка с помощью класса закладками элемента. По умолчанию, вкладка текст и без значка.

примеров

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

Попробуйте »

По умолчанию, вкладка цвета по умолчанию, вы можете установить следующие различные цветовые стили: вкладки-умолчанию, вкладки-легкие, вкладки-устойчивые, вкладки-положительные, вкладки-спокойные, вкладки уравновешенный, вкладки подается питание, вкладки напористый, вкладки -royal, язычки темноте.

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

вкладка Иконка

После того, как класс, чтобы добавить Вкладки-значок только классы могут быть установлены, чтобы отобразить только вкладку значок.

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

Попробуйте »

Верхняя иконка + вкладка текст

После того, как класс, чтобы добавить вкладки Вкладки-значок-высший класс значок + текст может быть установлен в верхней части вкладки.

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

Попробуйте »

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

После того, как класс, чтобы добавить Вкладки-значок левый значок на левой стороне класса, может быть установлен на вкладке + текст.

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

Попробуйте »

Полосатый вкладка Стиль

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

Полоски вкладка цвета можно управлять с помощью лапок-background- {цвет} и язычки-цвето {цвет}, значение {цвет} может быть: по умолчанию, легкий, стабильный, позитивный, спокойный, уравновешенный, запитывается, напористый, королевский, или темно.

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

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <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="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

Попробуйте »

Операционные результаты следующие: