ButtonGallery

Интерактивный тайл — кнопка, используемый в конце галереи айтемов. Может быть любого соотношения сторон, размера и скругления.

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

WARNING

Размер кнопки "опирается" на высоту или ширину родительского элемента (по умолчанию на высоту, но контролируется с помощью логического пропа width). Пользователь может только выбрать токен ее пропорции.

Визуализация соотношения токен/пропорция в макетах компонента Image.

HTML, Vue, Angular

<div style="height: 200px;">
  <ds-button-gallery ratio="tako" rounding="eluno" text="Показать еще"></ds-button-gallery>
</div>

<div style="width: 200px;">
  <ds-button-gallery ratio="tako" rounding="eluno" text="Показать еще" width></ds-button-gallery>
</div>

React

/* В стилях */
.wrapper {
  height: 200px;
  /* ... */
}

<div className="wrapper">
  <ButtonGallery ratio="tako" rounding="eluno" text="Показать еще"></ButtonGallery>
</div>

API

Props

Name	Type	Description	Default
ratio	String: ['kemto', 'odro', 'rada', 'tako', 'kano', 'tira']	Токен пропорции кнопки	'rada'
rounding	String: ['jade', 'akbu', 'rajol', 'theku', 'bana', 'sylilis', 'kurza', 'eluno', 'geban', 'nemea',]	Токен сккругления кнопки	'kurza'
text	String	Текст кнопки	''
width	Boolean	Пропорция опирается не на высоту, а на ширину?	false
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

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

React

Angular

Vue