Skip to content

Контейнер сетки. ui-grid

Компонент использует для реализации 12 колоночной системы сеток. Является контейнером для компонента ui-grid-cell. Отвечает за направленение и позиционирование дочерних элементов. Сетка реализована на базе flexbox.

Пример использования

<ui-grid
    :vr-gutter="1rem"
    :hr-gutter="2rem"
>
    <ui-grid-cell
        cells="6"
    >
        Какой то контент...
    </ui-grid-cell>
    <ui-grid-cell
        cells="6"
    >
        Какой то контент...
    </ui-grid-cell>
</ui-grid>

Параметры

Данный компонент поддерживает следущие параметры

  • direction - Направление осей в контейнере. Принимает значение row, column. По-умолчанию : row.
  • vrGutter - Вертикальный отступ у дочерних элементов.
  • hrGutter - Горизонтальный отступ у дочерних элементов.
  • innerClass - Присваивает класс для внутреннго элемента.
  • verticalAlign - Вертикальная позиция элементов внутри контейнера. Принимает значения top, center,bottom.По-умолчанию: top.
  • horizontalAlign - Горизонтальная позиция элементов внутри контейнера. Принимает значения left, center,right, between, around.По-умолчанию: left.

Классы компонента

В ходе работы компонента к его различным элементам присваиваются следующие классы.

Переключатель

  • .dropdown__toggle - опорный класс переключателя
  • .dropdown__toggle.is-focused - кнопка в фокусе, эквивалент :focus
  • .dropdown__toggle.is-hovered - кнопка, под курсором, эквивалент :hover
  • .dropdown__toggle.is-opened - дроп открыт
  • .dropdown__toggle.is-closed - дроп закрыт

выпадашка

  • dropdown__popup - контейнер пвыпадающего списка
  • dropdown__popup_opened - контейнер показан
  • dropdown__popup_closed - контейнер спрятаня

Особенности