Разделители контента

Content dividers (разделители контента)

Content dividers — это компонент, который используется для визуального разделения контента на странице. Он может быть представлен в виде горизонтальной линии с текстом или кнопками по центру, а также с дополнительными границами.

Классы и их назначение

Класс Назначение
.sf-progress-bar-container Основной контейнер для индикатора выполнения.
.sf-progress-bar Индикатор выполнения (полоса прогресса).
.sf-progress-bar--horizontal Модификатор для горизонтального отображения индикатора выполнения.
Класс Назначение
.sf-divider Основной контейнер для разделителя контента.
.sf-divider-horizontal Модификатор для горизонтального разделителя с линией по центру.
.sf-divider-borders Модификатор для добавления границ сверху и снизу.
.sf-divider-content Контейнер для текста или кнопок внутри разделителя.
.sf-divider-content--small Модификатор для уменьшения размера текста.
.sf-divider-content-border Модификатор для добавления рамки вокруг текста.
.sf-divider-button Кнопка внутри разделителя.
.sf-divider-button--left Модификатор для кнопки с закруглением слева.
.sf-divider-button--right Модификатор для кнопки с закруглением справа.
.sf-divider-button--solo Модификатор для одиночной кнопки с закругленными углами.
.sf-divider-button-square--left Модификатор для кнопки с квадратным закруглением слева.
.sf-divider-button-square--right Модификатор для кнопки с квадратным закруглением справа.

Переменные CSS и их значения по умолчанию

Переменная Значение по умолчанию Описание
--sf-divider--background-color var(--sf-outline-variant) Цвет фона горизонтальной линии.
--sf-divider-borders--border-color var(--sf-outline-variant) Цвет границ сверху и снизу.
--sf-divider-content--padding var(--sf-space-1/3) var(--sf-space-1) Внутренние отступы для текста или кнопок.
--sf-divider-content--background-color var(--sf-surface-0) Цвет фона текста или кнопок.
--sf-divider-content--color var(--sf-on-surface) Цвет текста.
--sf-divider-content--font-size var(--sf-text--size-2) Размер шрифта текста.

Пример HTML и CSS

Notifications 
                
                    <div class="sf-divider sf-divider-horizontal">
                        <span class="sf-divider-content">Notifications</span>
                    </div<
Today 
                
<div class="sf-divider sf-divider-horizontal">
    <span class="sf-divider-content sf-divider-content--small">Today</span>
</div>
Today 
                
<div class="sf-divider sf-divider-horizontal">
    <span class="sf-divider-content sf-divider-content-border ">Today</span>
</div>
                
            
                
<div class="sf-divider sf-divider-horizontal">
    <div class = "sf-divider-content">
        <button class = "sf-divider-button sf-divider-button--left">
            <i class="sf-icon">settings</i>
        </button>
        <button class = "sf-divider-button">
            <i class="sf-icon">settings</i>
        </button>
        <button class = "sf-divider-button sf-divider-button--right">
            <i class="sf-icon">settings</i>
        </button>
    </div>
</div>
                
            
                
<div class="sf-divider sf-divider-horizontal sf-divider-borders">
    <div class = "sf-divider-content">
        <button class = "sf-divider-button sf-divider-button--left">
            Button
        </button>
            <button class = "sf-divider-button">
            Button
        </button>
        <button class = "sf-divider-button sf-divider-button--right">
            Button
        </button>
    </div>
</div>
                
            
                
<div class="sf-divider sf-divider-borders sf-divider-horizontal">
    <div class = "sf-divider-content">
        <button class = "sf-divider-button sf-divider-button--solo">
            <i class="sf-icon">settings</i>
        </button>
    </div>
</div>
Текст по центру 
                
<div class="sf-divider">
    <span class="sf-divider-content">Текст по центру</span>
</div>
Текст по центру 
                
<div class="sf-divider">
    <span class="sf-divider-content sf-divider-content-border">Текст по центру</span>
</div>
                
            
                
<div class="sf-divider">
    <div class="sf-divider-content">
        <button class="sf-divider-button sf-divider-button-square--left">
            <i class="sf-icon">settings</i>
        </button>
        <button class="sf-divider-button">
            <i class="sf-icon">settings</i>
        </button>
        <button class="sf-divider-button sf-divider-button-square--right">
            <i class="sf-icon">settings</i>
        </button>
    </div>
</div>

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