Стиль границы

border-style

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

Классы

Класс Значение
border-dotted border-style: dotted;
border-x-dotted border-left-style: dotted;
border-right-style: dotted;
border-y-dotted border-top-style: dotted;
border-bottom-style: dotted;
border-left-dotted border-left-style: dotted;
border-right-dotted border-right-style: dotted;
border-top-dotted border-top-style: dotted;
border-bottom-dotted border-bottom-style: dotted;
border-dashed border-style: dashed;
border-x-dashed border-left-style: dashed;
border-right-style: dashed;
border-y-dashed border-top-style: dashed;
border-bottom-style: dashed;
border-left-dashed border-left-style: dashed;
border-right-dashed border-right-style: dashed;
border-top-dashed border-top-style: dashed;
border-bottom-dashed border-bottom-style: dashed;
border-solid border-style: solid;
border-x-solid border-left-style: solid;
border-right-style: solid;
border-y-solid border-top-style: solid;
border-bottom-style: solid;
border-left-solid border-left-style: solid;
border-right-solid border-right-style: solid;
border-top-solid border-top-style: solid;
border-bottom-solid border-bottom-style: solid;
border-double border-style: double;
border-x-double border-left-style: double;
border-right-style: double;
border-y-double border-top-style: double;
border-bottom-style: double;
border-left-double border-left-style: double;
border-right-double border-right-style: double;
border-top-double border-top-style: double;
border-bottom-double border-bottom-style: double;
border-hidden border-style: hidden;
border-x-hidden border-left-style: hidden;
border-right-style: hidden;
border-y-hidden border-top-style: hidden;
border-bottom-style: hidden;
border-left-hidden border-left-style: hidden;
border-right-hidden border-right-style: hidden;
border-top-hidden border-top-style: hidden;
border-bottom-hidden border-bottom-style: hidden;
border-none border-style: none;
border-x-none border-left-style: none;
border-right-style: none;
border-y-none border-top-style: none;
border-bottom-style: none;
border-left-none border-left-style: none;
border-right-none border-right-style: none;
border-top-none border-top-style: none;
border-bottom-none border-bottom-style: none;

Описание

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

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

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

Стиль границы со всех сторон

Используйте модификатор border-{dotted|dashed|solid|double} чтобы задать стиль границы для всех сторон. Чтобы убрать границу задайте стиль {hide|none}.

border-dotted
border-dashed
border-solid
border-double
border-hidden
border-none
<div class="border-dotted ...">border-dotted</div>
<div class="border-dashed ...">border-dashed</div>
<div class="border-solid ...">border-solid</div>
<div class="border-double ...">border-double</div>
<div class="border-hidden ...">border-hidden</div>
<div class="border-none ...">border-none</div>

Стиль границы по горизонтали или вертикали

Используйте модификатор border-{x|y}-{dotted|dashed|solid|double} чтобы задать стиль границы по горизонтали или вертикали.

border-x-dashed
border-y-dashed
<div class="border-4 border-x-dashed ...">border-x-dashed</div>
<div class="border-4 border-y-dashed ...">border-y-dashed</div>

Стиль границы с одной из сторон

Используйте модификатор border-{left|right|top|bottom}-{dotted|dashed|solid|double} для установки стиля границы с одной из сторон.

border-left-dashed
border-right-dashed
border-top-dashed
border-right-dashed
<div class="border-4 border-left-dashed ...">border-left-dashed</div>
<div class="border-4 border-right-dashed ...">border-right-dashed</div>
<div class="border-4 border-top-dashed ...">border-top-dashed</div>
<div class="border-4 border-bottom-dashed ...">border-bottom-dashed</div>

Адаптивность

Для установки стиля границы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:border-dashed для установки границы в виде штриховой линии для экранов размером Medium и больше.

<div class="md:border-2-dashed ..."></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

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