SegmentButton

Отображает группу кнопок

Группа кнопок функционально аналогичная вкладкам.

  <SegmentButton Mode="Primary">
    <Button Text="Button"/>
    <Button Text="Button"/>
  </SegmentButton>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
ActiveButton	Псевдоним для InputActiveButton, OutputActiveButton	number	0
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
InputActiveButton	Порядковый номер выбранной кнопки, начиная с 0 (входное значение)	number	0
Mode	Стиль кнопок согласно дизайн-системе Платформы	enum	Primary	`Primary` - Основной стиль; не рекомендуется использовать в панелях инструментов `Secondary` - Дополнительный стиль; например, для использования в панели инструментов
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputActiveButton	Порядковый номер выбранной кнопки, начиная с 0 (выходное значение)	number	0
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Скрипты:

setState({
  ActiveButton1: 0,
  ActiveButton2: 0,
  ActiveButton3: 0,
  ActiveButton4: 0,
  ActiveButton5: 0,
  ActiveButton6: 0,
})

JSX:

<Group CSS={['px-8']} Mode="Row" Height="500px">
  <Group CSS={['px-8']} Mode="Column">
    <Group CSS={['px-8']} Mode="Column" Width='400px'>
      <Text Mode="H2" Value="Primary"/>
      <Text Mode="Medium_14" Value="Используется по умолчанию и никогда внутри компонента Toolbar"/>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Text"/>
      <SegmentButton 
        Mode="Primary" 
        ActiveButton-var="ActiveButton1"
      >
        <Button Text="Normal"/>
        <Button Text="Normal"/>
        <Button Text="Normal"/>
      </SegmentButton>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Icon+Text"/>
      <SegmentButton 
        Mode="Primary" 
        ActiveButton-var="ActiveButton2"
      >
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
      </SegmentButton>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Icon"/>
      <SegmentButton 
        Mode="Primary" 
        ActiveButton-var="ActiveButton3"
      >
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
      </SegmentButton>
    </Group>
  </Group>
  <Group CSS={['px-8']} Mode="Column">
    <Group CSS={['px-8']} Mode="Column" Width='400px'>
      <Text Mode="H2" Value="Secondary"/>
      <Text Mode="Medium_14" Value="Используется внутри компонета Toolbar или вне его"/>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Text"/>
      <SegmentButton 
        Mode="Secondary" 
        ActiveButton-var="ActiveButton4"
      >
        <Button Text="Normal"/>
        <Button Text="Normal"/>
        <Button Text="Normal"/>
      </SegmentButton>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Icon+Text"/>
      <SegmentButton 
        Mode="Secondary" 
        ActiveButton-var="ActiveButton5"
      >
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
        <Button Text="Normal" >
          <Icon Value={{ name: 'check' }}/>
        </Button>
      </SegmentButton>
    </Group>
    <Group CSS={['px-8']} Mode="Column">
      <Text Mode="H2" Value="Icon"/>
      <SegmentButton 
        Mode="Secondary" 
        ActiveButton-var="ActiveButton6"
      >
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
        <Button>
          <Icon Value={{ name: 'delete_item' }}/>
        </Button>
      </SegmentButton>
    </Group>
  </Group>
</Group>

Свойства​

Примеры​

Свойства

Примеры