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

Tabs

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

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

Вкладки могут содержать ссылки. Активной считается вкладка, URL-адрес которой указан в адресной строке браузера.

<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>
<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
HiddenПризнак состояния компонента Скрытboolean
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
LinkDataДанные для построения ссылок: {icon,text,url}array
ModeВарианты работы компонентаenumStateState - Используется только для совместимости с Платформой Multi-D v.0.6 и более ранними
Links - Выбор вкладки с использованием механизма History API и обновление URL-адреса в адресной строке браузера
ModelПривязка отрисованного компонента к моделиany
NamesИндексы вкладокarray
OnClickОбработчик события Clickundefined
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Имя или индекс выбранной вкладки; если свойство не определено, то выбранной считается первая вкладкаany
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" Width="315px" 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" Width="375px" 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>