Wrapper

Компонент со слотом, предоставляющий адаптивную обертку для контента "на всю доступную ширину" и с правильными отступами по краям для использования в основном слоте компонента Layout. Поэтому существуют две модификации обертки, в зависимости от лейаута в который вставляется: "для сайта" и "для дашборда". По умолчанию - сайт.

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

Прочитайте также документацию по компоненту Layout.

Вы можете передавать небезопасные стили в хост компонента "как есть" под свою ответственность. Часто, например может быть нужно спозиционировать Враппер относительно, чтобы внутри него что-то разместить абсолютно.

HTML, Vue, Angular

<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

// Эта Обертка для "тела сайта", внутри лейаута-сайта, потому что 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	Основной слот

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

React

Angular

Vue