Кнопка закрытия

button-close
sm
md
lg
xl

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

Описание

Кнопка закрытия позволяет закрыть отображение элементов, в которых она используется. За счет модификаторов, кнопка закрытия может изменять свой внешний вид.

Структура

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

<div class="sf-close"></div>

Так как для размещения кнопки используется абсолютное позиционирование, то родительский слой должен иметь атрибут position: relative. Если вы не уверены в существовании данного атрибута, рекомендуется к вышестоящему слою добавить класс relative.

<div class="sf-close"></div>

Отображение на темном фоне

При размещении на темном фоне используйте модификатор .theme-dark для иконки закрытия или области, в которой он размещается.

<div class="h-c9 theme-dark bg-white relative">
    <button class="sf-close"></button>
</div>
<div class="h-c9 bg-pink-9 relative">
    <button class="sf-close theme-dark"></button>
</div>

Изменение размера

Для изменения размера кнопки закрытия вы может использовать адаптивный модификатор размера шрифта: .text-{размер} без адаптации под размер экрана и {контрольная точка}-text-{размер} с адаптацией под размер экрана. Размер может принимать значения от -3 до 7.

<div class="h-c0 theme-light relative">
    <button class="sf-close text-1/4"></button>
</div>
<div class="h-c2 theme-light relative">
    <button class="sf-close text-1/3"></button>
</div>
<div class="h-c4 theme-light relative">
    <button class="sf-close text-1/2"></button>
</div>	
<div class="h-c6 theme-light relative">
    <button class="sf-close text-1"></button>
</div>	
<div class="h-d0 theme-light relative">
    <button class="sf-close text-2"></button>
</div>
<div class="h-d2 theme-light relative">
    <button class="sf-close text-3"></button>
</div>
<div class="h-d4 theme-light relative">
    <button class="sf-close text-4"></button>
</div>	
<div class="h-d6 theme-light relative">
    <button class="sf-close text-5"></button>
</div>		
<div class="h-d8 theme-light relative">
    <button class="sf-close text-6"></button>
</div>	
<div class="h-e0 theme-light relative">
    <button class="sf-close text-7"></button>
</div>		
<div class="h-e2 theme-light relative">
    <button class="sf-close text-8"></button>
</div>

Изменение положения

Для изменения положения вы можете использовать следующие модификаторы:

  • .sf-close-right - отображение справа от блока с отступом от верхнего края. Используется для левого бокового модального окна.
  • .sf-close-right-top - отображение справа от блока с выравниванием по верхнему краю блока. Используется для модальных окон по центру экрана.
  • .sf-close-left - отображение справа от блока с отступом от верхнего края. Используется для правого бокового модального окна.
  • .sf-close-top - отображение сверху от блока с отступом от правого края. Используется для нижнего бокового модального окна.
  • .sf-close-bottom - отображение снизу от блока с отступом от правого края. Используется для верхнего бокового модального окна.
  • .sf-close-center - отображение по вертикали - по центру. Используется для размещения внутри элементов форм.
<div class="h-d9 w-d9 inline-block bg-gray relative">
    <button class="sf-close text-3 sf-close-right-top"></button>
</div>
<div class="h-d2 w-d2 bg-gray relative">
    <button class="sf-close text-3 sf-close-right"></button>
</div>
<div class="h-d2 w-d2 bg-gray relative">
    <button class="sf-close text-3 sf-close-left"></button>
</div>
<div class="h-c2 w-full bg-gray relative">
    <button class="sf-close text-3 sf-close-bottom"></button>
</div>
<div class="h-c2 w-full bg-gray relative">
    <button class="sf-close text-3 sf-close-top"></button>
</div>
<div class="relative">
    <input id="name" class="form-control p-2 m-0 w-full" type="search">
    <button class="sf-close text-1 sf-close-center"></button>
</div>

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

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

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

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