import {Meta, Unstyled} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/wiki/styles/# Контейнеры элементов'/>

# Контейнеры элементов

Класс `.wiki-storybook-item` — универсальный контейнер для демонстрации компонентов. Он обеспечивает стандартные скругления, рамки и управление пропорциями.


## Базовое использование

По умолчанию элемент имеет пропорции **1:1** и максимальную ширину **1080px**.

```html
<div class="wiki-storybook-item">
  <!-- Контент -->
</div>
```

<Unstyled>
  <div class="wiki-storybook-item">
    Элемент 1:1
  </div>
</Unstyled>


## Метки

Внутренний элемент `.wiki-storybook-item__label` предназначен для подписей. По умолчанию он прижат к левому верхнему углу.

### Позиционирование метки:
- Стандарт: Абсолютное позиционирование поверх контента.
- `.wiki-storybook-item__label--static`: Статичное позиционирование (обычный текстовый блок).

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">
      <div class="wiki-storybook-item__label">Overlay Label</div>
      <div class="wiki-storybook-dummy--size--sm wiki-storybook-dummy--color--blue"></div>
    </div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">
      <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Static Label</div>
      <div class="wiki-storybook-dummy--size--sm wiki-storybook-dummy--color--blue"></div>
    </div>
  </div>
</Unstyled>


## Пропорции

Модификаторы для изменения соотношения сторон:

- `.wiki-storybook-item--auto`: автоматическая высота под контент
- `.wiki-storybook-item--rectangle`: соотношение **16:9**
- `.wiki-storybook-item--widescreen`: соотношение **32:9**
- `.wiki-storybook-item--compact`: соотношение **64:9**

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">Автоматическая высота</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--rectangle">Элемент 16:9</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen">Элемент 32:9</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">Элемент 64:9</div>
  </div>
</Unstyled>


## Сетки и размеры

Классы в формате `--squared--[size]` управляют шириной элемента внутри сетки `.wiki-storybook-group`.

- `.wiki-storybook-item--squared--xs`: Занимает 3 колонки на мобильных, 2 на десктопе.
- `.wiki-storybook-item--squared--sm`: Занимает 6 колонок на мобильных, 2 или 4 на десктопе.
- `.wiki-storybook-item--squared--md`: Занимает 12 колонок на мобильных, 4 или 6 на десктопе.
- `.wiki-storybook-item--squared--lg`: Занимает 12 колонок на мобильных, 6 на десктопе.
- `.wiki-storybook-item--squared--max`: Занимает все 12 колонок на любом устройстве.

<Unstyled>
  <div class="wiki-storybook-group">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--xs">XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--xs">XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--sm">SM</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen wiki-storybook-item--squared--md">MD</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen wiki-storybook-item--squared--max">MAX</div>
  </div>
</Unstyled>




## Дополнительные модификаторы

- `.wiki-storybook-item--widthAuto`: Устанавливает автоматическую ширину (по умолчанию `100%`).
- `.wiki-storybook-item--overflowVisible`: Позволяет контенту выходить за границы (отключает `hidden`).
- `.wiki-storybook-item--padding`: Добавляет стандартный отступ `16px`.
- `.wiki-storybook-item--center`: Центрирует содержимое контента.
- `.wiki-storybook-item--rtl`: Устанавливает направление текста справа налево (для тестирования RTL).

<Unstyled>
  <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--center">
    Контент с паддингом в центре (width: auto)
  </div>
</Unstyled>
