2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Оформление

Границы

Адаптивный модификатор .b отображает границы элемента.

Параметры

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

  • Сторона. Необязательный параметр. При отсутствии применяет толщину границы ко всем сторонам. Может принимать значения:
    • t – верхняя граница
    • b – нижняя граница
    • l – левая граница
    • r – правая граница
    • x – левая и правая граница
    • y – верхняя и нижняя граница

    Можно комбинировать границы. Например, для того чтобы задать границы для трех сторон, можно совместить границу для всех сторон и отсутствие границы для одной из сторон.

  • Контрольная точка. Необязательный параметр. Отображает границу только для определенного диапазона в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Толщина. Обязательный параметр. Указывает толщину границы. Принимает значение от 0 до 5 (px). Значение 0 – для отсутствия границы.

Возможно сочетания различных границ для разных разрешений экрана:

  • .b-1 .bb-0 – граница в 1px слева, сверху и справа
  • .b-1 .b-sm-2 .b-md-3 – граница в 1px по умолчанию. На небольших устройствах толщина границы 2px, на больших – 3px

Стороны границ

Используйте параметры t, b, l, r, x, y для указания стороны отображения границы.

All
Top
Right
Bottom
Left
Horizontal
Vertical
All (minus) Top
All (minus) Right
All (minus) Bottom
All (minus) Left
<div class="p-3 mb-2 bg-gray-100 b-1">All</div>
<div class="row">
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bt-1">Top</div></div>
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 br-1">Right</div></div>
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bb-1">Bottom</div></div>
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bl-1">Left</div></div>
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bx-1">Horizontal</div></div>
	<div class="col-2"><div class="p-3 mb-2 bg-gray-100 by-1">Vertical</div></div>
</div>	
<div class="row">
	<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bt-0">All (minus) Top</div></div>
	<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 br-0">All (minus) Right</div></div>
	<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bb-0">All (minus) Bottom</div></div>
	<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bl-0">All (minus) Left</div></div>
</div>

Адаптивные границы

Вы можете использовать параметры контрольных точек для отображения границ при различных разрешениях. Для просмотра демонстрации, измените разрешение экрана.

All XS
All SM
All MD
All LG
All XL
<div class="p-3 mb-2 bg-gray-100 b-1">All XS</div>	
<div class="p-3 mb-2 bg-gray-100 b-sm-1">All SM</div>
<div class="p-3 mb-2 bg-gray-100 b-md-1">All MD</div>
<div class="p-3 mb-2 bg-gray-100 b-lg-1">All LG</div>
<div class="p-3 mb-2 bg-gray-100 b-xl-1">All XL</div>

Толщина границ

Вы можете использовать параметры толщины границы для изменения ее значения от 1 до 10.

All 1
All 2
All 3
All 4
All 5
<div class="p-3 mb-2 bg-gray-100 b-1">All 1</div>	
<div class="p-3 mb-2 bg-gray-100 b-2">All 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3">All 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4">All 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5">All 5</div>

Стиль границ

По умолчанию границы отображаются сплошной линией. Для измененения стиля границы используйте следующие классы:

  • .b-dotted – dotted (короткий пунктир)
  • .b-dashed – dashed (длинный пунктир)
  • .b-double – double (двойная сплошная)
Solid 1
Solid 2
Solid 3
Solid 4
Solid 5
Dotted 1
Dotted 2
Dotted 3
Dotted 4
Dotted 5
Dashed 1
Dashed 2
Dashed 3
Dashed 4
Dashed 5
Double 1
Double 2
Double 3
Double 4
Double 5
<div class="row">
	<div class="col-3">
		<div class="p-3 mb-2 bg-gray-100 b-1">Solid 1</div>	
		<div class="p-3 mb-2 bg-gray-100 b-2">Solid 2</div>
		<div class="p-3 mb-2 bg-gray-100 b-3">Solid 3</div>
		<div class="p-3 mb-2 bg-gray-100 b-4">Solid 4</div>
		<div class="p-3 mb-2 bg-gray-100 b-5">Solid 5</div>
	</div>
	<div class="col-3">
		<div class="p-3 mb-2 bg-gray-100 b-1 b-dotted">Dotted 1</div>	
		<div class="p-3 mb-2 bg-gray-100 b-2 b-dotted">Dotted 2</div>
		<div class="p-3 mb-2 bg-gray-100 b-3 b-dotted">Dotted 3</div>
		<div class="p-3 mb-2 bg-gray-100 b-4 b-dotted">Dotted 4</div>
		<div class="p-3 mb-2 bg-gray-100 b-5 b-dotted">Dotted 5</div>
	</div>
	<div class="col-3">
		<div class="p-3 mb-2 bg-gray-100 b-1 b-dashed">Dashed 1</div>	
		<div class="p-3 mb-2 bg-gray-100 b-2 b-dashed">Dashed 2</div>
		<div class="p-3 mb-2 bg-gray-100 b-3 b-dashed">Dashed 3</div>
		<div class="p-3 mb-2 bg-gray-100 b-4 b-dashed">Dashed 4</div>
		<div class="p-3 mb-2 bg-gray-100 b-5 b-dashed">Dashed 5</div>
	</div>	
	<div class="col-3">
		<div class="p-3 mb-2 bg-gray-100 b-1 b-double">Double 1</div>	
		<div class="p-3 mb-2 bg-gray-100 b-2 b-double">Double 2</div>
		<div class="p-3 mb-2 bg-gray-100 b-3 b-double">Double 3</div>
		<div class="p-3 mb-2 bg-gray-100 b-4 b-double">Double 4</div>
		<div class="p-3 mb-2 bg-gray-100 b-5 b-double">Double 5</div>
	</div>
</div>

Закругление границ

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

  • Сторона. Необязательный параметр. При отсутствии применяет толщину границы ко всем сторонам. Может принимать значения:
    • t – верхняя граница
    • b – нижняя граница
    • l – левая граница
    • r – правая граница
    • x – левая и правая граница
    • y – верхняя и нижняя граница

    Можно комбинировать закругление границ. Например, для того чтобы закруглить границы для трех сторон можно совместить закругление границ для всех сторон и отсутствие закругления границы для одной из сторон.

  • Контрольная точка. Необязательный параметр. Отображает закругление границы только для определенного диапазона в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Радиус закругления. Обязательный параметр. Указывает закругления границы. Принимает значение от 0 до 5:
    • 0 – отсутствие закругления
    • 1 – закругление радиусом 0.125rem
    • 2 – закругление радиусом 0.25rem
    • 3 – закругление радиусом 0.5rem
    • 4 – закругление радиусом 1rem
    • 5 – закругление радиусом 2rem
    • 6 – закругление радиусом 4rem
    • 7 – закругление радиусом 4rem

Для полного закругления границ используйте класс circle

Радиус 1
Радиус 2
Радиус 3
Радиус 4
Радиус 5
Circle
Верхний радиус 1
Верхний радиус 2
Верхний радиус 3
Верхний радиус 4
Верхний радиус 5
Правый радиус 1
Правый радиус 2
Правый радиус 3
Правый радиус 4
Правый радиус 5
Нижний радиус 1
Нижний радиус 2
Нижний радиус 3
Нижний радиус 4
Нижний радиус 5
Левый радиус 1
Левый радиус 2
Левый радиус 3
Левый радиус 4
Левый радиус 5
Верхний Левый радиус 1
Верхний Левый радиус 2
Верхний Левый радиус 3
Верхний Левый радиус 4
Верхний Левый радиус 5
Верхний Правый радиус 1
Верхний Правый радиус 2
Верхний Правый радиус 3
Верхний Правый радиус 4
Верхний Правый радиус 5
Нижний левый радиус 1
Нижний левый радиус 2
Нижний левый радиус 3
Нижний левый радиус 4
Нижний левый радиус 5
Нижний правый радиус 1
Нижний правый радиус 2
Нижний правый радиус 3
Нижний правый радиус 4
Нижний правый радиус 5
<div class="p-3 mb-2 bg-gray-100 b-1 r-1">Радиус 1</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-2">Радиус 2</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-3">Радиус 3</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-4">Радиус 4</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-5">Радиус 5</div>
<div class="p-3 mb-2 bg-gray-100 b-1 circle">Circle</div>

Адаптивное закругление границы

Вы можете использовать параметры контрольных точек для отображения закругления границы при различных разрешениях. Для просмотра демононстрации, измените разршение экрана.

Радиус XS-0, SM-2, MD-3, LG-4, XL-5
Левый радиус XS-0, right XS-5, left LG-5, right LG-0
Радиус XS-0, top-left SM-5, top-right MD-5, bottom-right LG-5, bottom-left XL-5
<div class="p-4 mb-2 bg-gray-100 b-1 r-0 r-sm-2 r-md-3 r-lg-4 r-xl-5">Радиус XS-0, SM-2, MD-3, LG-4, XL-5</div>
<div class="p-4 mb-2 bg-gray-100 b-1 rl-0 rr-5 rl-lg-5 rr-lg-0">Левый радиус XS-0, right XS-5, left LG-5, right LG-0</div>
<div class="p-4 mb-2 bg-gray-100 b-1 r-0 rtl-sm-5 rtr-md-5 rbr-lg-5 rbl-xl-5">Радиус XS-0, top-left SM-5, top-right MD-5, bottom-right LG-5, bottom-left XL-5</div>

Цвет границ

Используйте модификаторы цвета, чтобы изменить цвет границы.

b-primary
b-secondary
b-success
b-info
b-warning
b-danger
b-red
b-pink
b-purple
b-deep-purple
b-indigo
b-blue
b-light-blue
b-cyan
b-teal
b-green
b-light-green
b-lime
b-yellow
b-amber
b-orange
b-deep-orange
b-brown
b-grey
b-blue-grey
<div class="b-1 b-primary p-3 mb-2">b-primary</div>
<div class="b-1 b-secondary p-3 mb-2">b-secondary</div>
<div class="b-1 b-success p-3 mb-2">b-success</div>
<div class="b-1 b-info p-3 mb-2">b-info</div>
<div class="b-1 b-warning p-3 mb-2">b-warning</div>
<div class="b-1 b-danger p-3 mb-2">b-danger</div>
<div class="b-1 b-red p-3 mb-2">b-red</div>
<div class="b-1 b-pink p-3 mb-2">b-pink</div>
<div class="b-1 b-purple p-3 mb-2">b-purple</div>
<div class="b-1 b-deep-purple p-3 mb-2">b-deep-purple</div>
<div class="b-1 b-indigo p-3 mb-2">b-indigo</div>
<div class="b-1 b-blue p-3 mb-2">b-blue</div>
<div class="b-1 b-light-blue p-3 mb-2">b-light-blue</div>
<div class="b-1 b-cyan p-3 mb-2">b-cyan</div>
<div class="b-1 b-teal p-3 mb-2">b-teal</div>
<div class="b-1 b-green p-3 mb-2">b-green</div>
<div class="b-1 b-light-green p-3 mb-2">b-light-green</div>
<div class="b-1 b-lime p-3 mb-2">b-lime</div>
<div class="b-1 b-yellow p-3 mb-2">b-yellow</div>
<div class="b-1 b-amber p-3 mb-2">b-amber</div>
<div class="b-1 b-orange p-3 mb-2">b-orange</div>
<div class="b-1 b-deep-orange p-3 mb-2">b-deep-orange</div>
<div class="b-1 b-brown p-3 mb-2">b-brown</div>
<div class="b-1 b-grey p-3 mb-2">b-grey</div>
<div class="b-1 b-blue-grey p-3 mb-2">b-blue-grey</div>

Совмещение параметров

Вы можете совмещать любые модификаторы границ, чтобы добиться требуемого отображения.

color + different size - bottom border
color + different adaptive size
dotted + color + different size
Primary, Double, Size-3 Радиус XS-0, SM-2, MD-3, LG-4, XL-5
Secondary, Size-2, dassed, Левый радиус XS-0, right XS-5, left LG-5, right LG-0
<div class="p-4 mb-2 bg-gray-100 bt-1 br-2 bl-4 bb-0  b-blue ">color + different size - bottom border</div>
<div class="p-4 mb-2 bg-gray-100 bt-1 br-xl-2 bb-lg-2 bl-md-4 b-green ">color + different adaptive size</div>
<div class="p-4 mb-2 bg-gray-100 bt-1 br-2 bb-3 bl-4 b-dotted b-red ">dotted + color + different size</div>
<div class="p-4 mb-2 bg-gray-100 b-3 b-primary b-double r-0 r-sm-2 r-md-3 r-lg-4 r-xl-5">Primary, Double, Size-3 Радиус XS-0, SM-2, MD-3, LG-4, XL-5</div>
<div class="p-4 mb-2 bg-gray-100 b-2 b-secondary b-dashed rl-0 rr-5 rl-lg-5 rr-lg-0">Secondary, Size-2, dassed, Левый радиус XS-0, right XS-5, left LG-5, right LG-0</div>