Accordion
Отображает меню-гармошка
Представляет вертикально сложенный список элементов, каждый из которых может быть развернут или раскры т для отображения дочерних элементов. Дочерние элементы третьего и последующих уровней считаются значками, на которые можно нажимать.
<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-стилей компонента | array | ||
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| Disabled | Признак состояния компонента Отключен | boolean | False | |
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| Level | Добавление класса для управления стилями дочерних элементов каждого уровня | number | 0 | |
| Mode | Режим отображения компонента согласно дизайн-системе Платформы | enum | Old | Default - Компонент выровнен по ширине, стрелка для отображения дочерних элементов отображается справаMini - Режим компактного отображения компонента для использования, например, в мобильных приложенияхOld - Режим для совместимости с версиями компонента в Платформе v.0.6 |
| 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 | ||
| OutputValue | Текущее состояние компонента Свернут: true — компонент свернут, false — компонент развернут | any | ||
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
| Value | Признак состояния компонента Свернут | boolean | False | |
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True | |
| Width | Ширина в пикселях, процентах или значение auto | string | 100% | |
| WithBadge | Признак отображения количества дочерних элементов компонента - deprecated, будет удален в последующих версиях, использовать свойство Badge | boolean | False |
Примеры
Данные:
"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>