Wrapper
Компонент со слотом, предоставляющий адаптивную обертку для контента "на всю доступную ширину" и с правильными отступами по краям для использования в основном слоте компонента Layout. Поэтому существуют две модификации обертки, в зависимости от лейаута в который вставляется: "для сайта" и "для дашборда". По умолчанию - сайт.
Использование
Прочитайте также документацию по компоненту Layout.
Вы можете передавать небезопасные стили в хост компонента "как есть" под свою ответственность. Часто, например может быть нужно спозиционировать Враппер относительно, чтобы внутри него что-то разместить абсолютно.
HTML, Vue, Angular
html
<ds-layout token="dashboard">
<main slot="main" role="main">
<section>
<ds-wrapper token="dashboard" styles="position: relative;">
<div slot="main">
<ds-text
value="On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of the
moment, so blinded by desire, that they cannot foresee the pain and
trouble that are bound to ensue; and equal blame belongs to those who
fail in their duty through weakness of will, which is the same as saying
through shrinking from toil and pain. These cases are perfectly simple
and easy to distinguish."
></ds-text>
<!-- Предположим - некая картинка которую нужно разместить относительно краев Обертки -->
<div style="position: absolute; top: ..."></div>
</div>
</ds-wrapper>
</section>
<section>
<ds-wrapper>
<!-- ... -->
</ds-wrapper>
</section>
</main>
</ds-layout>React
js
// Эта Обертка для "тела сайта", внутри лейаута-сайта, потому что token не указан, и значит по умолчанию в 'site'
<Wrapper>
<Text
slot="main"
value="On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of the
moment, so blinded by desire, that they cannot foresee the pain and
trouble that are bound to ensue; and equal blame belongs to those who
fail in their duty through weakness of will, which is the same as saying
through shrinking from toil and pain. These cases are perfectly simple
and easy to distinguish."
></Text>
</Wrapper>API
Props
| Name | Type | Description | Default |
|---|---|---|---|
| token | ['site', 'dashboard'] | Токен "лейаута", в котором используется обертка | site |
| styles | String | "Небезопастная" строка для передачи правил CSS в компонент | '' |
| full | Boolean | Позволяет отменить горизонтальные отступы на типоразмере narrow - для мобильных экранов | false |
Slots
| Name | Description |
|---|---|
| main | Основной слот |