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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
Пример визуального отображения компонента:
+
== Описание ==
 +
Компонент состоит из двух частей, сначала добавляется группа вкладок (tabset), в fieldGroup перечисляется список вкладок (tab), в вкладке в свойстве fieldGroup перечисляется список компонентов которые выводит эта вкладка
 +
 
 +
== Группа вкладок ==
 +
'''Код компонента:''' <code>tabset</code>
 +
 
 +
'''Описание:''' Добавляет группу вкладок
 +
 
 +
'''Свойства:'''
 +
{| class="wikitable"
 +
|-
 +
! Код !! Тип !! Описание
 +
|-
 +
| type || string || Тип компонента
 +
|-
 +
| fieldGroup || array || Список табов
 +
|-
 +
!colspan="3"| templateOptions
 +
|-
 +
| heightSize || number || Ширина картинки в px
 +
|-
 +
| widthSize || number || Высота картинки в px
 +
|}
 +
 
 +
== Вкладка ==
 +
 
 +
'''Код компонента:''' <code>tab</code>
 +
 
 +
'''Описание:''' Добавляет вкладку в группу
 +
 
 +
'''Свойства:'''
 +
{| class="wikitable"
 +
|-
 +
! Код !! Тип !! Описание
 +
|-
 +
| type || string || Тип компонента
 +
|-
 +
| fieldGroup || array || Список компонентов которые будут отображаться во вкладке
 +
|-
 +
!colspan="3"| templateOptions
 +
|-
 +
| tabTitle || string || Заголовок таба
 +
|}
 +
== Пример ==
 +
[https://3v.3v-group.net/navigator/#/home?viewId=45602 Ссылка на живой пример]
 +
 
 +
'''JSON'''
 +
<pre>
 +
{
 +
  "type": "tabset",
 +
  "fieldGroup": [
 +
    {
 +
      "type": "tab",
 +
      "fieldGroup": [],
 +
      "templateOptions": {
 +
        "tabTitle": "Таб 1"
 +
      }
 +
    },
 +
    {
 +
      "type": "tab",
 +
      "fieldGroup": [],
 +
      "templateOptions": {
 +
        "tabTitle": "Таб 2"
 +
      }
 +
    }
 +
  ]
 +
}
 +
</pre>
 +
'''Выведет'''
 +
 
 +
[[Файл:Компонент Таб.jpg]]

Версия 07:43, 28 апреля 2021

Описание

Компонент состоит из двух частей, сначала добавляется группа вкладок (tabset), в fieldGroup перечисляется список вкладок (tab), в вкладке в свойстве fieldGroup перечисляется список компонентов которые выводит эта вкладка

Группа вкладок

Код компонента: tabset

Описание: Добавляет группу вкладок

Свойства:

Код Тип Описание
type string Тип компонента
fieldGroup array Список табов
templateOptions
heightSize number Ширина картинки в px
widthSize number Высота картинки в px

Вкладка

Код компонента: tab

Описание: Добавляет вкладку в группу

Свойства:

Код Тип Описание
type string Тип компонента
fieldGroup array Список компонентов которые будут отображаться во вкладке
templateOptions
tabTitle string Заголовок таба

Пример

Ссылка на живой пример

JSON 

{
  "type": "tabset",
  "fieldGroup": [
    {
      "type": "tab",
      "fieldGroup": [],
      "templateOptions": {
        "tabTitle": "Таб 1"
      }
    },
    {
      "type": "tab",
      "fieldGroup": [],
      "templateOptions": {
        "tabTitle": "Таб 2"
      }
    }
  ]
}

Выведет

Компонент Таб.jpg

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