Платформа 3V/Формы/Компоненты/Верстка/Вкладки: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
== Описание ==
+
{{DISPLAYTITLE:Группа вкладок}}
−
Компонент состоит из двух частей, сначала добавляется группа вкладок (tabset), в fieldGroup перечисляется список вкладок (tab), в вкладке в свойстве fieldGroup перечисляется список компонентов которые выводит эта вкладка
+
<div align="right">'''''Реализовано в [[Описание_релизов/0.43.0#Новый компонент разметки. Новый элемент. Вкладки(trv-tabset и trv-tab) | версии 0.43]]'''''</div>
 +
'''Группа вкладок''' - элемент разметки, который с помощью вложенных элементов "Вкладка" даёт возможность переключения между несколькими наборами элементов интерфейса в одной форме. </br>
 +
__TOC__
 +
<br>
 +
== Добавить группу вкладок ==
 +
Группу вкладок можно добавить через конструктор во вкладке "''Разметка''".
 +
=== Добавить вложенные вкладки ===
 +
Вложенным элементом "Группа вкладок" может являться только элемент "Вкладка" и вся работа происходит внутри них. Вместе с группой вкладок добавляется первая вкладка по умолчанию. Для добавления нужного количества вкладок достаточно встать на элемент группа вкладок и нажать [[Файл:outline add black 24dp.png]]. <br>
 +
[[Файл:Разметка. Выпад.список.png|border]] <br clear="both" /><br>
 +
== Настроить группу вкладок ==
 +
Группа вкладок занимает 100% родительского контейнера.
 +
=== Настроить размер вкладок ===
 +
Размер вкладки можно настроить в конструкторе в поле "Размер". <br>
 +
[[Файл:Размер вкладок.png|border]]  <br clear="both" /><br>
  
−
== Группа вкладок ==
 
−
'''Код компонента:''' <code>tabset</code>
 
−
 
−
'''Описание:''' Добавляет группу вкладок
 
−
 
−
'''Свойства:'''
 
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
−
! Код !! Тип !! Описание
+
! Размер !! Значение
−
|-
 
−
| type || string || Тип компонента
 
−
|-
 
−
| fieldGroup || array || Список табов
 
−
|-
 
−
!colspan="3"| templateOptions
 
 
|-
 
|-
−
| heightSize || number || Ширина картинки в px
+
| Маленький || 24px
 
|-
 
|-
−
| widthSize || number || Высота картинки в px
+
| Стандартный || 32px
 
|}
 
|}
  
−
== Вкладка ==
+
=== Настроить расположение группы вкладок ===
 +
Расположение настраивается в поле "Расположение" и может быть двух видов:<br>
 +
[[Файл:расположение.png|border]]  <br clear="both" /><br>
 +
 
 +
горизонтальный<br>
 +
[[Файл:вкладки по горизонтали.png|border]]  <br clear="both" /><br>
 +
 
 +
и  вертикальный <br>
 +
[[Файл:вкладки по вертикали.png|border]]  <br clear="both" /><br>
 +
 
 +
=== Настроить расположение заголовков вкладок ===
 +
Изменить расположение заголовков относительно выравнивания можно с помощью поля "Выравнивание заголовков вкладок". Выровнять можно двумя способами:<br>
 +
с начала<br>
 +
[[Файл:вкладка.с начала.png|border]]  <br clear="both" /><br>
 +
по центру<br>
 +
[[Файл:вкладка по центру.png|border]]  <br clear="both" /><br>
 +
 
 +
Для того, чтобы задать отступ от родительского элемента разметки следует прописать его в поле "Отступ для заголовков вкладок" в пикселях или процентах. Отступ появляется перед вкладками. <br>
 +
Например, для заданных 20% отступа <br>
 +
[[Файл:20 процентов отступа.png|border]]  <br clear="both" /><br>
 +
Панель вкладок будет выглядеть так:<br>
 +
[[Файл:Отступ для заголовков.png|border]]  <br clear="both" /><br>
 +
 
 +
== Настроить вкладки ==
 +
=== Настроить заголовок и его локализацию ===
 +
Для настройки заголовка достаточно задать его в настройке "Заголовок". Локализовать заголовок можно с помощью с помощью выбора русского [[Файл:Локализация.RU.png]] или английского [[Файл:Локализация.EN.png]] тега.<br>
 +
 
 +
=== Настроить подсказку и её локализацию ===
 +
Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка". Локализовать подсказку можно с помощью с помощью выбора русского [[Файл:Локализация.RU.png]] или английского [[Файл:Локализация.EN.png]] тега.
  
−
'''Код компонента:''' <code>tab</code>  
+
=== Настроить иконку ===
 +
Для того, чтобы выбрать иконку следует задать её наименование из [https://fonts.google.com/icons?selected=Material+Icons Material Icons]. Иконка располагается перед заголовком вкладки. <br>
  
−
'''Описание:''' Добавляет вкладку в группу
+
=== Добавить вложенные элементы ===
 +
Каждая вкладка является контейнером, поэтому может работать только с вложенными именно в неё элементами. Для того, чтобы добавить вложенный элемент, нужно во вкладке создать новый или перенести уже существующий. <br>
 +
[[Файл:вложенные вкладки.png|border]]  <br clear="both" /><br>
  
−
'''Свойства:'''
+
==== Настроить правила отображения====
−
{| class="wikitable"
+
Для того, чтобы настроить правила нужно создать шаблон с определёнными настройками. [[Платформа_3V/Формы/Правила|Подробнее...]]
−
|-
 
−
! Код !! Тип !! Описание
 
−
|-
 
−
| type || string || Тип компонента
 
−
|-
 
−
| fieldGroup || array || Список компонентов которые будут отображаться во вкладке
 
−
|-
 
−
!colspan="3"| templateOptions
 
−
|-
 
−
| tabTitle || string || Заголовок таба
 
−
|}
 
−
== Пример ==
 
−
[https://3v.3v-group.net/navigator/#/home?viewId=45602 Ссылка на живой пример]
 
  
−
'''JSON'''
+
=== Стилизовать вкладки ===
−
<pre>
+
Стилизация настраивается в настройках стилей по кнопке [[Файл:стили контейнер.png]]. [[Платформа_3V/Формы/Компоненты/Верстка/Контейнер#Стилизовать контейнер|Подробнее...]]
−
{
 
−
  "type": "tabset",
 
−
  "fieldGroup": [
 
−
    {
 
−
      "type": "tab",
 
−
      "fieldGroup": [],
 
−
      "templateOptions": {
 
−
        "tabTitle": "Таб 1"
 
−
      }
 
−
    },
 
−
    {
 
−
      "type": "tab",
 
−
      "fieldGroup": [],
 
−
      "templateOptions": {
 
−
        "tabTitle": "Таб 2"
 
−
      }
 
−
    }
 
−
  ]
 
−
}
 
−
</pre>
 
−
'''Выведет'''
 
  
−
[[Файл:Компонент Таб.jpg]]
+
== Пример ==
 +
Пример на платформе можно посмотреть [https://study.3v-cloud.com/navigator/#?objectId= здесь]

Версия 10:13, 27 января 2022

Реализовано в версии 0.43

Группа вкладок - элемент разметки, который с помощью вложенных элементов "Вкладка" даёт возможность переключения между несколькими наборами элементов интерфейса в одной форме.


Добавить группу вкладок

Группу вкладок можно добавить через конструктор во вкладке "Разметка".

Добавить вложенные вкладки

Вложенным элементом "Группа вкладок" может являться только элемент "Вкладка" и вся работа происходит внутри них. Вместе с группой вкладок добавляется первая вкладка по умолчанию. Для добавления нужного количества вкладок достаточно встать на элемент группа вкладок и нажать outline add black 24dp.png.
Разметка. Выпад.список.png

Настроить группу вкладок

Группа вкладок занимает 100% родительского контейнера.

Настроить размер вкладок

Размер вкладки можно настроить в конструкторе в поле "Размер".
Размер вкладок.png

Размер Значение
Маленький 24px
Стандартный 32px

Настроить расположение группы вкладок

Расположение настраивается в поле "Расположение" и может быть двух видов:
расположение.png

горизонтальный
вкладки по горизонтали.png

и вертикальный
вкладки по вертикали.png

Настроить расположение заголовков вкладок

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

по центру
вкладка по центру.png

Для того, чтобы задать отступ от родительского элемента разметки следует прописать его в поле "Отступ для заголовков вкладок" в пикселях или процентах. Отступ появляется перед вкладками.
Например, для заданных 20% отступа
20 процентов отступа.png

Панель вкладок будет выглядеть так:
Отступ для заголовков.png

Настроить вкладки

Настроить заголовок и его локализацию

Для настройки заголовка достаточно задать его в настройке "Заголовок". Локализовать заголовок можно с помощью с помощью выбора русского Локализация.RU.png или английского Локализация.EN.png тега.

Настроить подсказку и её локализацию

Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка". Локализовать подсказку можно с помощью с помощью выбора русского Локализация.RU.png или английского Локализация.EN.png тега.

Настроить иконку

Для того, чтобы выбрать иконку следует задать её наименование из Material Icons. Иконка располагается перед заголовком вкладки.

Добавить вложенные элементы

Каждая вкладка является контейнером, поэтому может работать только с вложенными именно в неё элементами. Для того, чтобы добавить вложенный элемент, нужно во вкладке создать новый или перенести уже существующий.
вложенные вкладки.png

Настроить правила отображения

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

Стилизовать вкладки

Стилизация настраивается в настройках стилей по кнопке стили контейнер.png. Подробнее...

Пример

Пример на платформе можно посмотреть здесь

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Верстка/Вкладки&oldid=5835