Учебники

Framework7 — вкладки

Декабрь 31, 2018

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

Расположение вкладок

Следующий код определяет макет для вкладок — 

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Где —

  • <div class = «tabs»> — Обязательная оболочка для всех вкладок. Если мы пропустим это, вкладки не будут работать вообще.

  • <div class = «tab»> — это отдельная вкладка, которая должна иметь уникальный атрибут id .

  • <div class = «tab active»> — это одна активная вкладка, которая использует дополнительный активный класс, чтобы сделать вкладку видимой (активной).

<div class = «tabs»> — Обязательная оболочка для всех вкладок. Если мы пропустим это, вкладки не будут работать вообще.

<div class = «tab»> — это отдельная вкладка, которая должна иметь уникальный атрибут id .

<div class = «tab active»> — это одна активная вкладка, которая использует дополнительный активный класс, чтобы сделать вкладку видимой (активной).

Переключение между вкладками

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

Для этого вам нужно создать ссылки (теги <a>) с классом tab-link и атрибутом href, равным атрибуту id целевой вкладки — 

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Переключить несколько вкладок

Если вы используете ссылку на одну вкладку для переключения между несколькими вкладками, то вы можете использовать классы вместо идентификаторов и атрибута вкладки данных . 

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

Атрибут data-tab tab-link содержит CSS-селектор целевой вкладки / tabs.

Мы можем использовать разные способы вкладок, они указаны в следующей таблице:

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

Мы можем разместить вкладки в панели навигации, которые позволяют переключаться между ними.

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

Вы можете использовать простой переход (анимация) для переключения вкладок.

Вы можете создавать пролистываемые вкладки с простым переходом, используя класс tabs-swipeable-wrap для вкладок.

События JavaScript можно использовать, когда вы работаете с кодом JavaScript для вкладок.

Вы можете переключить или показать вкладку, используя методы JavaScript.

45
Share: