Перейти к основному содержимому

Tabs

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

Используется для переключения между связанным содержимым. Отрисовывает вкладки, но не управляет видимостью содержимого. Выходными данными является индекс или имя текущей вкладки. Существует два режима работы контрола: State (используется по-умолчанию) и Links. В режиме State названия вкладок задаются дочерними элементами, которые могут быть Текстом, Иконкой или Группой. В свойство Model (или OutputValue) записывается имя активной вкладки, если определено свойство Names. Если свойство Names не определено, туда записывается индекс вкладки.

<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 названия вкладок задаются массивом LinkData, каждый элемент которого описывается полями icon, text и url. В этом режиме переключение вкладок меняет URL страницы. Активной считается вкладка, URL-адрес которой указан в адресной строке браузера.

<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"},
    ]}
/>

Свойства​

ИмяОписаниеТипЗначение по умолчаниюВозможные значения
Badgearray
CSSМассив строк-классов CSS-стилей компонентаarray
CombineConfigКонфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм.
Не рекомендуется указывать значение вручную		object
HiddenПризнак состояния компонента СкрытbooleanFalse
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
LinkDataДанные для построения ссылок: {icon,text,url}array
ModeВарианты работы компонентаenumStateState - Используется только для совместимости с Платформой v.0.6 и более ранними
Links - Выбор вкладки с использованием механизма History API и обновление URL-адреса в адресной строке браузера
ModelПривязка отрисованного компонента к моделиany
NamesИндексы вкладокarray
OnClickОбработчик события нажатия кнопки мышиundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnUnmountОбработчик события Unmountundefined
OutputValueИмя выбранной вкладки, если свойство Names определено, или индекс вкладки в противном случаеany
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
TabDataДанные для добавления интерактивности к компоненту: {icon}array
TitlesСодержимое, отображаемое на вкладке по умолчанию, если содержимое вкладки не переданоarray
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceId
Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
ValueИмя или индекс выбранной вкладки; если свойство не определено, то выбранной считается первая вкладкаany0
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue

Примеры​

Данные:

  "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>