Переменные Bulma Breadcrumb
Опубликовано: 31 Декабря, 2022
Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox. Он богат компонентами, совместим и хорошо документирован. Он очень отзывчив по своей природе. Он использует классы для реализации своего дизайна.
В Bulma хлебные крошки — это простой компонент навигации. Для навигации по компоненту нам нужен только контейнер хлебных крошек и список ul.
Используемая переменная:
| Имя-переменной | Описание | Тип | Ценность | Вычисленное значение | Вычисляемый тип |
|---|---|---|---|---|---|
| $breadcrumb-item-color | Эта переменная используется для придания цвета элементу хлебной крошки. | переменная. | $ссылка | hsl(229, 53%, 53%) | цвет |
| $breadcrumb-item-hover-color | Эта переменная используется для обеспечения эффекта наведения на элемент хлебных крошек. | переменная | $link-hover | hsl(0, 0%, 21%) | цвет |
| $breadcrumb-item-active-color | Эта переменная используется для предоставления цвета активным элементам. | переменная | $ text-сильный | hsl(0, 0%, 21%) | цвет |
| $breadcrumb-item-padding-vertical | Эта переменная используется для предоставления вертикального заполнения элемента. | нить | 0 | ||
| $breadcrumb-item-padding-horizontal | Эта переменная используется для обеспечения горизонтального заполнения элемента. | размер | 0,75 эм | ||
| $breadcrumb-item-separator-color | Эта переменная используется для задания цвета разделителя. | переменная | $border-hover | hsl(0, 0%, 71%) | цвет |
Пример 1. В приведенном ниже коде мы будем использовать переменную $breadcrumb-item-color .
Код СКСС:
$breadcrumb-item-color: hsl(229, 53%, 53%);
li{
color:$breadcrumb-item-color;
}Скомпилированный CSS-код:
li {
color: #485fc7;
}Выход:
Пример 2. В приведенном ниже коде мы будем использовать переменную $breadcrumb-item-padding-horizontal .
Код СКСС:
$breadcrumb-item-padding-horizontal: 0.75em;
li {
padding:$breadcrumb-item-padding-horizontal;
}Скомпилированный CSS-код:
li {
padding: 0.75em;
}Выход:
Ссылка: https://bulma.io/documentation/components/breadcrumb/#variables