Image
Картинка.
Использование
WARNING
Размер кнопки "опирается" на высоту или ширину родительского элемента (по умолчанию на высоту, но контролируется с помощью логического пропа width). Пользователь может только выбрать токен ее пропорции.
Визуализация соотношения токен/пропорция в макетах компонента Image.
По умолчанию картинка "натягивается на пропорцию": background-size: cover; background-repeat: no-repeat; background-position: 50%;, но может быть "вписана в нее": background-size: contain; background-repeat: no-repeat; если выставить пропс contain в true;
HTML, Vue, Angular
html
<div style="height: 200px;">
<ds-image ratio="tako" rounding="eluno"></ds-image>
</div>
<div style="width: 200px;">
<ds-image ratio="tako" rounding="eluno" width></ds-image>
</div>React
css
/* В стилях */
.wrapper {
height: 200px;
/* ... */
}js
<div className="wrapper">
<Image ratio="tako" rounding="eluno"></Image>
</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' |
| path | String | Путь до ресурса | '' |
| contain | Boolean | Картинка "вписана" в пропорцию? | false |
| width | Boolean | Пропорция опирается не на высоту, а на ширину? | false |
| loading | Boolean | Картинка подгружается? Выдно "скелетон" вместо нее? | false |
| _loading | undefined, String: ['true', 'false'] | Дублирующий литеральный атбрибут | undefined |