Accordion

Развернуть/свернуть блок.

Использование

WARNING

Для корректной работы слота справа от текстового контрола - обязательно укажите его ширину в пикселах через проп width.

INFO

Используйте проп full для отключения сокращения многоточием контента триггера при переполнении.

HTML

<ds-accordion token="amelie" width="100" text="Текст контрола элемента!">
  <div slot="actions">...</div>
  <div slot="content">
    <h1>11111111111111111</h1>
    <h1>22222222222222222</h1>
    <h1>33333333333333333</h1>
  </div>
</ds-accordion>

React

import { Accordion } from '@rir/ds-library';

function Component() {
  return (
    <>
      <Accordion token="amelie" width="100" text="Текст контрола элемента!">
        <div slot="actions">...</div>
        <div slot="content">
          <h1>11111111111111111</h1>
          <h1>22222222222222222</h1>
          <h1>33333333333333333</h1>
        </div>
      </Accordion>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
token	enum Colors: ['transparent', 'walle', 'amelie']	Токен вида элемента	'transparent'
size	String: ['amphinomis', 'celareino', 'meliphia', 'pasithea', 'criamisa', 'marilia']	Размер элемента	'amphinomis'
text	String	Текстовый контент контрола элемента	''
width	Number	Ширина зарезервированная под слот actions (в правой части контрола) в пикселях	0
full	Boolean	Отключает многоточие при переполнении контента в триггере	false

Slots

Name	Description
actions	Слот в правой части контрола элемента
content	Слот для контента (изначально скрыт)

Примеры проектов

React

Angular

Vue