Стиль разделителя

divider-style

В SIMAI Framework с помощью модифкаторов можно задать стиль разделителя.

Классы

Класс Значение
divider-dotted>:not([hidden])~:not([hidden]) border-style: dotted;
divider-dashed>:not([hidden])~:not([hidden]) border-style: dashed;
divider-solid>:not([hidden])~:not([hidden]) border-style: solid;
divider-double>:not([hidden])~:not([hidden]) border-style: double;
divider-hidden>:not([hidden])~:not([hidden]) border-style: hidden;
divider-none>:not([hidden])~:not([hidden]) border-style: none;

Описание

Адаптивный модификатор. Задает стиль разделителя в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • divider-dotted - разделитель отображается точками,
    • divider-dashed - разделитель отображается пунктирной линией,
    • divider-solid - разделитель отображается сплошной линией,
    • divider-double - разделитель отображается двойной линией,
    • divider-none - разделитель не отображается и значение его толщины обнуляется,
    • divider-hidden - имеет тот же эффект, что и divider-none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse.

Пример

Используйте модификатор divider-{style} чтобы задать стиль разделителя..

1
2
3
<div class="grid grid-col-3 divider-dashed divider-y-1 divider-gray-3 divider-spare ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Изменить статью