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

Ширина

С помощью модификаторов ширины, вы легко можете изменить ширину элемента. В SIMAI Framework вы можете задавать ширину относительно родительского элемента или размера шрифта html.

Ширина относительно родителя

Адаптивный модификатор. Позволяет изменять ширину относительно родительского элемента. Использование: .w{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер относительно родительского элемента. Принимает значения:
    • 0 – 0%
    • 10 – 10%
    • 20 – 20%
    • 25 – 25%
    • 30 – 30%
    • 33 – 33%
    • 1-3 – 33.33333%
    • 34 – 34%
    • 40 – 40%
    • 50 – 50%
    • 60 – 60%
    • 2-3 – 66.66666%
    • 70 – 70%
    • 75 – 75%
    • 80 – 80%
    • 90 – 90%
    • 100 – 100%
.w-10
.w-20
.w-25
.w-30
.w-33
.w-1-3
.w-34
.w-40
.w-50
.w-60
.w-2-3
.w-70
.w-75
.w-80
.w-90
.w-100
<div class="bg-theme-50">
  <div class="p-1 mb-1 bg-theme-700 w-10"><code>.w-10</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-20"><code>.w-20</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-25"><code>.w-25</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-30"><code>.w-30</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-33"><code>.w-33</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-1-3"><code>.w-1-3</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-34"><code>.w-34</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-40"><code>.w-40</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-50"><code>.w-50</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-60"><code>.w-60</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-2-3"><code>.w-2-3</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-70"><code>.w-70</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-75"><code>.w-75</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-80"><code>.w-80</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-90"><code>.w-90</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-100"><code>.w-100</code></div>
</div>

Пример использования в адаптивном режиме:

<div class="w-90 w-lg-75 w-xl-50"></div>

Абсолютная ширина

Адаптивный модификатор. С помощью модификатора .wr вы можете устанавливать размер объекта относительно размера шрифта html. Использование: .wr{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер относительно размера шрифта страницы (html). Принимает значения:
    • 1 – 1 rem
    • 2 – 2 rem
    • 3 – 4 rem
    • 4 – 8 rem
    • 5 – 16 rem
    • 6 – 32 rem
    • 7 – 48 rem
    • 8 – 64 rem
.wr-1
.wr-2
.wr-3
.wr-4
.wr-5
.wr-6
.wr-7
.wr-8
<div class="bg-theme-50">
  <div class="p-1 mb-1 bg-theme-700 wr-1"><code>.wr-1</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-2"><code>.wr-2</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-3"><code>.wr-3</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-4"><code>.wr-4</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-5"><code>.wr-5</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-6"><code>.wr-6</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-7"><code>.wr-7</code></div>
  <div class="p-1 mb-1 bg-theme-700 wr-8"><code>.wr-8</code></div>
</div>

Пример использования в адаптивном режиме:

<div class="wr-4 wr-lg-5 wr-xl-6"></div>

Автоматическая ширина

Адаптивный модификатор. С помощью модификатора .w-auto вы можете устанавливать автоматическую ширину объекта. Использование: .wr{контрольная точка}-auto