Accordion

Отображает меню-гармошка

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

'Default': компонент выровнен по ширине, стрелка для отображения дочерних элементов отображается справа.
'Mini': режим компактного отображения компонента для использования, например, в мобильных приложениях.
'Old': режим для совместимости с версиями Платформы до v.0.6. Имеется возможность указания ширины компонента и положения стрелки для отображения дочерних элементов.

    <Accordion Model-var="test">
      <Text Value="trigger" />
      <Text Value="content" />
    </Accordion>

Свойства

ArrowPos

Положение стрелки для отображения дочерних элементов.

Тип: enum

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

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

Left - Слева Right - Справа Justify - Выровнено по ширине

Badge

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Платформы.

Пример:

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

Тип: array

CombineConfig

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

Тип: object

Disabled

Признак состояния компонента Отключен.

Тип: boolean

Hidden

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

Тип: boolean

Hint

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

Тип: any

Id

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

Тип: string

Mode

Режим отображения компонента согласно дизайн-системе Платформы.

Тип: enum

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

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

Default - Компонент выровнен по ширине, стрелка для отображения дочерних элементов отображается справа. Mini - Режим компактного отображения компонента для использования, например, в мобильных приложениях. Old - Режим для совместимости с версиями Платформы до v.0.6.

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

Текущее состояние компонента Свернут: true — компонент свернут, false — компонент развернут.

Тип: any

Slot

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

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

Тип: any

TraceId

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

Тип: string

Value

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

Тип: boolean

Visible

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

Тип: boolean

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

Width

Ширина в пикселях, процентах или значение auto.

Тип: string

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

WithBadge

Признак отображения количества дочерних элементов компонента. Устаревшее свойство, которое будет удалено в следующих версиях. Вместо этого свойства рекомендуется использовать свойство Badge.

Тип: boolean

Примеры

Данные:

  "testClosed": true
}

JSX:

<Group Mode="Column" Height="auto">
    <Group Mode="Row" Height="auto" CSS={['mb-24']}>
      <Group Mode="Column" Width="285px">
        <Text Mode="Medium_20" Value="По умолчанию" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Базовый вариант. Используется по умолчанию" />
      </Group>
      <Group Mode="Column" CSS={['mr-24']}>
        <Text Mode="Medium_18" Value="Без бейджа" CSS={['mb-24']} />
      
        <Group Mode="Wrap" CSS={['mb-24']}>
          <Group Mode="Column">
            <Accordion 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="ltfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="ltfoo10" Value="0" Label="Название опции" />
              </Group>
            </Accordion>
  
            <Text Value="Базовый вариант." />
          </Group>
        </Group>
        
        <Group Mode="Wrap" CSS={['mb-24']}>
          <Group Mode="Column">
            <Accordion 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Icon Name="link" Size="Small" />
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="lmfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="lmfoo10" Value="0" Label="Название опции" />
              </Group>
            </Accordion>
  
            <Text Value="Вариант отображения со значком слева без возможности нажатия мышью" />
          </Group>
        </Group>
  
        <Group Mode="Wrap">
          <Group Mode="Column">
            <Accordion 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Icon Name="link" Size="Small" />
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="lbfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="lbfoo10" Value="0" Label="Название опции" />
              </Group>
              <Icon 
                Name="download_item" 
                Size="Small"
                Color="GRAY_6"
                onClick={ () => { 
                  const event = getEvent();
                  event.stopPropagation();
                  alert('Clickable') 
                } }
              />
            </Accordion>
  
            <Text Value="Вариант отображения со значком слева и дополнительным значком справа" />
          </Group>
        </Group>
      </Group>
  
      <Group Mode="Column" CSS={['ml-24']}>
        <Text Mode="Medium_18" Value="С бейджиком" CSS={['mb-24']} />
  
        <Group Mode="Wrap" CSS={['mb-24']}>
          <Group Mode="Column">
            <Accordion 
              Badge={{
                counter: 7,
                position: "pre",
              }} 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="rtfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="rtfoo10" Value="0" Label="Название опции" />
              </Group> 
            </Accordion>
          </Group>
  
          <Text Value="Базовый вариант отображения с бейджем" />
        </Group>
  
        <Group Mode="Wrap" CSS={['mb-24']}>
          <Group Mode="Column">
            <Accordion 
              Badge={{
                counter: 77,
                position: "pre",
                color: "info",
              }} 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Icon Name="link" Size="Small" />
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="rmfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="rmfoo10" Value="0" Label="Название опции" />
              </Group>
            </Accordion>
          </Group>
  
          <Text Value="Вариант отображения со значком справа без возможности нажатия" />
        </Group>
  
        <Group Mode="Wrap">
          <Group Mode="Column">
            <Accordion 
              Badge={{
                counter: 777,
                position: "pre",
                color: "criticalError",
              }} 
              ArrowPos="Right" 
              Mode="Default" 
              Value={true}
              CSS={['mb-16']}
            >
              <Group Align="Start" VerticalAlign="Center">
                <Icon Name="link" Size="Small" />
                <Text Value="Accordion" />
              </Group>
              <Group Mode="Column">
                <Checkbox Model-var="rbfoo" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo1" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo2" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo3" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo4" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo5" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo6" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo7" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo8" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo9" Value="0" Label="Название опции" />
                <Checkbox Model-var="rbfoo10" Value="0" Label="Название опции" />
              </Group>
              <Icon 
                Name="download_item" 
                Size="Small"
                Color="GRAY_6"
                onClick={ () => { 
                  const event = getEvent();
                  event.stopPropagation();
                  alert('Clickable') 
                } }
              />  
            </Accordion>
          </Group>
  
          <Text Value="Вариант отображения со значком слева и дополнительным значком справа с возможностью нажатия" />
        </Group>
      </Group>
    </Group>
    <Group Mode="Row">
    
    <Group Mode="Column" Width="285px">
      <Text Mode="Medium_20" Value="Компактный" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется при ограниченной области для отображения компонента" />
    </Group>
    <Group Mode="Column" CSS={['mr-24']}>
      <Text Mode="Medium_18" Value="Без бейджа" CSS={['mb-24']} />
  
      <Group Mode="Wrap" CSS={['mb-24']}>
        <Group Mode="Column">
          <Accordion 
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mltfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mltfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mltfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mltfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mltfoo4" Value="0" Label="Название опции" />
            </Group>
          </Accordion>
  
          <Text Value="Базовый вариант отображения" />
        </Group>
      </Group>
    
      <Group Mode="Wrap" CSS={['mb-24']}>
        <Group Mode="Column">
          <Accordion 
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Icon Name="link" CSS={['mr-8']} Size="Small" />
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mlmfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlmfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlmfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlmfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlmfoo4" Value="0" Label="Название опции" />
            </Group>
          </Accordion>
        </Group>
  
        <Text Value="Вариант отображения со значком слева без возможности нажатия" />
      </Group>
  
      <Group Mode="Wrap">
        <Group Mode="Column">
          <Accordion 
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Icon Name="link" CSS={['mr-8']} Size="Small" />
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mlbfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlbfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlbfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlbfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mlbfoo4" Value="0" Label="Название опции" />
            </Group>
            <Icon 
              Name="download_item" 
              Size="Small"
              Color="GRAY_6"
              onClick={ () => { 
                const event = getEvent();
                event.stopPropagation();
                alert('Clickable') 
              } }
            />
            <Icon 
              Name="cameraProjection" 
              Size="Small"
              Color="GRAY_6"
              onClick={ () => { 
                const event = getEvent();
                event.stopPropagation();
                alert('Clickable') 
              } }
            /> 
          </Accordion>
        </Group>
  
        <Text Value="Вариант отображения со значком слева и дополнительным значком справа" />
      </Group>
    </Group>
  
    <Group Mode="Column" CSS={['ml-24']}>
      <Text Mode="Medium_18" Value="С бейджиком" CSS={['mb-24']} />
  
      <Group Mode="Wrap" CSS={['mb-24']}>
        <Group Mode="Column">
          <Accordion 
            Badge={{
              counter: 777,
              position: "post",
              color: "error",
            }}  
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mrtfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrtfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrtfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrtfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrtfoo4" Value="0" Label="Название опции" />
            </Group>
          </Accordion>
        </Group>
        <Text Value="Базовый вариант с бейджем" />
      </Group>
  
      <Group Mode="Wrap" CSS={['mb-24']}>
        <Group Mode="Column">
          <Accordion 
            Badge={{
              counter: 77,
              position: "post",
              color: "warning",
            }}  
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Icon Name="link" CSS={['mr-8']} Size="Small" />
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mrmfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrmfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrmfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrmfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrmfoo4" Value="0" Label="Название опции" />
            </Group>
          </Accordion>
        </Group>
        <Text Value="Вариант отображения со значком слева без возможности нажатия" />
      </Group>
  
      <Group Mode="Wrap">
        <Group Mode="Column">
          <Accordion 
            Badge={{
              counter: 7,
              position: "post",
              color: "success",
            }}  
            Mode="Mini" 
            Value={true}
            CSS={['mb-16']}
          >
            <Group Align="Start" VerticalAlign="Center">
              <Icon Name="link" CSS={['mr-8']} Size="Small" />
              <Text Value="Accordion" />
            </Group>
            <Group Mode="Column">
              <Checkbox Model-var="mrbfoo" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrbfoo1" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrbfoo2" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrbfoo3" Value="0" Label="Название опции" />
              <Checkbox Model-var="mrbfoo4" Value="0" Label="Название опции" />
            </Group>
            <Icon 
              Name="download_item" 
              Size="Small"
              Color="GRAY_6"
              onClick={ () => { 
                const event = getEvent();
                event.stopPropagation();
                alert('Clickable') 
              } }
            />
            <Icon 
              Name="cameraProjection" 
              Size="Small"
              Color="GRAY_6"
              onClick={ () => { 
                const event = getEvent();
                event.stopPropagation();
                alert('Clickable') 
              } }
            /> 
          </Accordion>
        </Group>
  
        <Text Value="Вариант отображения со значком слева и дополнительным значком справа с возможностью нажатия" />
      </Group>
    </Group>
  </Group> 
  </Group>

Свойства​

ArrowPos​

Badge​

CSS​

CombineConfig​

Disabled​

Hidden​

Hint​

Id​

Mode​

OnClick​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

OutputValue​

Slot​

Tooltip​

TraceId​

Value​

Visible​

Width​

WithBadge​

Примеры​

Свойства

ArrowPos

Badge

CSS

CombineConfig

Disabled

Hidden

Hint

Id

Mode

OnClick

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

OutputValue

Slot

Tooltip

TraceId

Value

Visible

Width

WithBadge

Примеры