PiTabber

## Инфобокс

* Таб 1
* Таб 2
* Таб 3
* Таб 4
* Таб 5
* Таб 6

## Информация

Таб 1

Таб 2

Таб 3

Таб 4

Таб 5

Таб 6

Просто инфобокс, без каких-либо изменений, как он есть.

## Горизонталдьный таббер

Синтаксис таббера такой же, как и у обычных инфобоксов, лишь нужно всё обернуть в div с классом таббера.

### Код

```
<div class="pi-tabber">
<infobox>
<panel>
 <section>
 <label>Таб 1</label>
 <data source="Таб 1"><default>Таб 1</default></data>
 </section>
 <section>
 <label>Таб 2</label>
 <data source="Таб 2"><default>Таб 2</default></data>
 </section>
 <section>
 <label>Таб 3</label>
 <data source="Таб 3"><default>Таб 3</default></data>
 </section>
 <section>
 <label>Таб 4</label>
 <data source="Таб 4"><default>Таб 4</default></data>
 </section>
 <section>
 <label>Таб 5</label>
 <data source="Таб 5"><default>Таб 5</default></data>
 </section>
 <section>
 <label>Таб 6</label>
 <data source="Таб 6"><default>Таб 6</default></data>
 </section>
</panel>
</infobox>

```

### Пример

* Lorem ipsum
* Таб 2
* Таб 3
* Таб 4
* Таб 5
* Таб 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Таб 2

Таб 3

Таб 4

Таб 5

Таб 6

## Вертикальный таббер

Аналогично прошлому, но с вертикальными табами.

### Код

```
<div class="pi-tabber vertical">
<infobox>
<panel>
 <section>
 <label>Таб 1</label>
 <data source="Таб 1"><default>Таб 1</default></data>
 </section>
 <section>
 <label>Таб 2</label>
 <data source="Таб 2"><default>Таб 2</default></data>
 </section>
 <section>
 <label>Таб 3</label>
 <data source="Таб 3"><default>Таб 3</default></data>
 </section>
 <section>
 <label>Таб 4</label>
 <data source="Таб 4"><default>Таб 4</default></data>
 </section>
 <section>
 <label>Таб 5</label>
 <data source="Таб 5"><default>Таб 5</default></data>
 </section>
 <section>
 <label>Таб 6</label>
 <data source="Таб 6"><default>Таб 6</default></data>
 </section>
</panel>
</infobox>

```

### Пример

* Lorem ipsum
* Таб 2
* Таб 3
* Таб 4
* Таб 5
* Таб 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Таб 2

Таб 3

Таб 4

Таб 5

Таб 6

## Lua таббер

Предварительно следует подключить Global Lua Modules/Tabber, благодаря которому будет простой синтаксис таббера. После этого нужно лишь обернуть шаблон в div с классом для таббера, как и в предыдущих вариантах.

### Код

```
<div class="pi-tabber">
{{Tabber

}}
</div>
</div>

```

### Пример

**Горизонтальный**

* Tab 1
* Tab 2

## Tab 2

Content of tab 2

**Горизонтальный без заголовков**
Чтобы убрать заголовки, нужно добавить класс `no-headers`

* Tab 1
* Tab 2

## Tab 2

Content of tab 2

**Вертикальный**

* Tab 1
* Tab 2