Tabs

Отображает вкладки

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

State. Используется по умолчанию. Используется только для совместимости с Платформой v.0.6 и более ранними версиями. Имена вкладок задаются дочерними компонентами: Text, Icon или Group. Если свойство Names определено, в свойство Model или OutputValue записывается имя активной вкладки. Если свойство Names не определено, значению этого свойства присваивается номер вкладки. Номер отсчитывается с нуля.
Links. Имена вкладок задаются массивом LinkData, каждый элемент которого имеет поля: icon, text и url. В результате переключения вкладок в адресной строке браузера URL-адрес меняется. Активной считается вкладка, URL-адрес которой указан в адресной строке браузера. Пример использования компонента в режиме State:

<Tabs Model-var="currentTab">
    <Group VerticalAlign="Center" Mode="Row">
      <Icon Value={{ name: 'person' }} />
      <Text Value="Tab 1" />
    </Group>
    <Group VerticalAlign="Center" Mode="Row">
      <Icon Value={{ name: 'person' }} />
      <Text Value="Tab 1" />
    </Group>
</Tabs>

Пример использования компонента в режиме Link:

<Tabs
    Mode={"Links"}
    LinkData={[
      {text:'Первый',url: "p/ui-kit/tabs/examples"},
      {text:'Второй',url: "p/ui-kit/tabs/examples/1"},
      {text:'Третий',url: "p/ui-kit/tabs/examples/2"},
    ]}
/>

Свойства

Badge

Количественная информация, отображаемая справа от имени каждой из вкладок в кружке. Задается массивом строк, например, ["1","8","999"]

Тип: array

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Hidden

Признак состояния компонента Скрыт

Тип: boolean

Hint

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

LinkData

Массив объектов с полями: icon (не обязательное поле) - значок, отображаемый на вкладке, text - надпись или имя вкладки, url - URL-адрес вкладки. Используется для режима работы Links

Тип: array

Mode

Режим работы компонента

Тип: enum

Значение по умолчанию: State

Возможные значения:

State - Используется только для совместимости с Платформой v.0.6 и более ранними версиями Links - Выбор вкладки с использованием механизма History API и обновлением URL-адреса в адресной строке браузера

Model

Привязка отрисованного компонента к модели

Тип: any

Names

Массив номеров вкладок

Тип: array

OnClick

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyDown

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputValue

Имя выбранной вкладки, если свойство Names определено, или номер вкладки, если свойство Names не определено

Тип: any

Slot

Именованное пространство во фрагменте экранной формы.

Тип: string

TabData

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

Тип: array

Titles

Содержимое на вкладке по умолчанию, если содержимое вкладки не определено

Тип: array

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Value

Имя или номер выбранной вкладки. Если это свойство не определено, выбранной считается первая вкладка

Тип: any

Visible

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Примеры

Данные:

  "currentTab1": 1,"currentTab2": 1,"currentTab3": 1,"currentTab4": 1,"badges": ["1","8","999"]
}

JSX:

<Group Mode={"Column"}>
    <Group >
      <Group Mode="Column">
        <Text Value="Text" CSS={['mb-24']} Mode="Medium_20" />
        <Group Mode="Wrap" Width="220px" Height="auto" CSS={['mb-60']}>
          <Tabs
            Mode="State"
            Model-var="currentTab1"
            Titles={['Первый', 'Второй', 'Третий']}
            Names={[1,2,3]}
          />
           <Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab1) => currentTab1 === 1}>
              <Text Value="{1} Содержимое первой вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab1) => currentTab1 === 2}>
              <Text Value="{1} Содержимое второй вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab1) => currentTab1 === 3}>
              <Text Value="{1} Содержимое третьей вкладки" />
            </Group>
          </Group>
        </Group>
        <Text Value="Text+Icon" CSS={['mb-24']} Mode="Medium_20" />
        <Group Mode="Wrap" Width="280px" Height="auto">
          <Tabs
            Mode="State"
            Titles={['Первый', 'Второй', 'Третий']}
            Names={[1,2,3]}
            Model-var="currentTab2"
            TabData={[
              {icon: 'copy_v2'},
              {icon: 'menuItem_v2'},
              {icon: 'emploees'},
            ]}
          />
          <Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab2) => currentTab2 === 1}>
              <Text Value="{2} Содержимое первой вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab2) => currentTab2 === 2}>
              <Text Value="{2} Содержимое второй вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab2) => currentTab2 === 3}>
              <Text Value="{2} Содержимое третьей вкладки" />
            </Group>
          </Group>
        </Group>
      </Group>
      <Group Mode="Column">
        <Text Value="Text+Badge" CSS={['mb-24']} Mode="Medium_20" />
        <Group Mode="Wrap" Height="auto" CSS={['mb-60']}>
          <Tabs
            Mode="State"
            Badge-var="badges"
            Model-var="currentTab3"
            Titles={['Первый', 'Второй', 'Третий']}
            Names={[1,2,3]}
          />
          <Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab3) => currentTab3 === 1}>
              <Text Value="{3} Содержимое первой вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab3) => currentTab3 === 2}>
              <Text Value="{3} Содержимое второй вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab3) => currentTab3 === 3}>
              <Text Value="{3} Содержимое третьей вкладки" />
            </Group>
          </Group>
        </Group>
        <Text Value="Icon+Text+Badge" CSS={['mb-24']} Mode="Medium_20" />
        <Group Mode="Wrap" Height="auto">
          <Tabs
            Mode="State"
            Badge-var="badges"
            Titles={['Первый', 'Второй', 'Третий']}
            Names={[1,2,3]}
            Model-var="currentTab4"
            TabData={[
              {icon: 'copy_v2'},
              {icon: 'menuItem_v2'},
              {icon: 'emploees'},
            ]}
          />
          <Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab4) => currentTab4 === 1}>
              <Text Value="{4} Содержимое первой вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab4) => currentTab4 === 2}>
              <Text Value="{4} Содержимое второй вкладки" />
            </Group>
            <Group Mode="Row" CSS={['mt-16']} Visible={(currentTab4) => currentTab4 === 3}>
              <Text Value="{4} Содержимое третьей вкладки" />
            </Group>
          </Group>
        </Group>
        </Group>
      </Group>
  <Tabs
    Visible={false}
    Mode="Links"
    Badge-var="badges"
    
    LinkData={[
      {icon: 'copy_v2', text:'Первый',url: "p/ui-kit/tabs/examples"},
      {icon: 'menuItem_v2', text:'Второй',url: "p/ui-kit/tabs/examples/1"},
      {icon: 'emploees', text:'Третий',url: "p/ui-kit/tabs/examples/2"},
    ]}
  />
  <Tabs
    Visible={false}
    Mode="State"
    Badge-var="badges"
    Model-var="currentTab"
    Titles={['Первый', 'Второй', 'Третий']}
    Names={[1,2,3]}
    TabData={[
      {icon: 'copy_v2'},
      {icon: 'menuItem_v2'},
      {icon: 'emploees'},
    ]}
  />
</Group>

Свойства​

Badge​

CSS​

CombineConfig​

Hidden​

Hint​

Id​

LinkData​

Mode​

Model​

Names​

OnClick​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

OutputValue​

Slot​

TabData​

Titles​

Tooltip​

TraceId​

Value​

Visible​

Примеры​

Свойства

Badge

CSS

CombineConfig

Hidden

Hint

Id

LinkData

Mode

Model

Names

OnClick

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

OutputValue

Slot

TabData

Titles

Tooltip

TraceId

Value

Visible

Примеры