Уведомления
Уведомление выделяет важную информацию в потоке страницы: подсказку,
предупреждение, ошибку или подтверждение результата. Для краткого сообщения
поверх интерфейса берите всплывающее сообщение .
Пример
info
Доступна новая версия
Сохраните изменения перед обновлением страницы.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Доступна новая версия</div >
<div class ="sf-alert-supporting-text" >Сохраните изменения перед обновлением страницы.</div >
</div >
</div >
</div >
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-alert → иконка sf-icon и sf-alert-wrap → sf-alert-content →
sf-alert-text и sf-alert-supporting-text.
На блоке sf-alert — один класс статуса и один класс вида.
sf-alert-text — заголовок, sf-alert-supporting-text — пояснение. Оба
набраны одним размером; заголовок выделен средним начертанием.Иконка необязательна; она декоративна и получает aria-hidden="true".
Кнопки действий кладутся в sf-alert-buttons внутри sf-alert-wrap, кнопка
закрытия — последним потомком блока.
Варианты
Статус
Статус задаёт цвет заливки, границы, текста и иконки:
sf-alert--neutral, sf-alert--info, sf-alert--success,
sf-alert--warning, sf-alert--error — общий словарь статусов Framework.
Для обычной подсказки берите neutral; остальные выбирайте по смыслу
сообщения, а не по желаемому цвету. Классы sf-alert--clear и
sf-alert--danger — другие имена neutral и error.
sf-alert--neutral
info
Обратите внимание
Нейтральная информация без оценки результата.
sf-alert--info
info
Доступна новая версия
Сохраните изменения перед обновлением страницы.
sf-alert--success
check_circle
Изменения сохранены
Новая версия доступна участникам команды.
sf-alert--warning
warning
Проверьте настройки
После сохранения часть параметров изменить нельзя.
sf-alert--error
error
Не удалось сохранить
Проверьте соединение и повторите попытку.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--neutral</code >
<div class ="sf-alert sf-alert--neutral sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Обратите внимание</div >
<div class ="sf-alert-supporting-text" >Нейтральная информация без оценки результата.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--info</code >
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Доступна новая версия</div >
<div class ="sf-alert-supporting-text" >Сохраните изменения перед обновлением страницы.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--success</code >
<div class ="sf-alert sf-alert--success sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Изменения сохранены</div >
<div class ="sf-alert-supporting-text" >Новая версия доступна участникам команды.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--warning</code >
<div class ="sf-alert sf-alert--warning sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >warning</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Проверьте настройки</div >
<div class ="sf-alert-supporting-text" >После сохранения часть параметров изменить нельзя.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--error</code >
<div class ="sf-alert sf-alert--error sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >error</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Не удалось сохранить</div >
<div class ="sf-alert-supporting-text" >Проверьте соединение и повторите попытку.</div >
</div >
</div >
</div >
</div >
</div >
Вид
Вид задаёт, чем уведомление отделено от окружения: sf-alert--default —
заливкой и границей, для самостоятельного заметного сообщения;
sf-alert--outlined — только границей, спокойнее на фоне страницы;
sf-alert--flat — только заливкой, внутри поверхности, границы которой задаёт
окружающий контейнер. В одном сценарии держите один вид.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-3 gap-3" >
<div class ="flex flex-col gap-2" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--default: заливка и граница</code >
<div class ="sf-alert sf-alert--neutral sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Обратите внимание</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Доступна новая версия</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--success sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Изменения сохранены</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--warning sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >warning</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Проверьте настройки</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--error sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >error</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Не удалось сохранить</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-2" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--outlined: только граница</code >
<div class ="sf-alert sf-alert--neutral sf-alert--outlined flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Обратите внимание</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--info sf-alert--outlined flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Доступна новая версия</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--success sf-alert--outlined flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Изменения сохранены</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--warning sf-alert--outlined flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >warning</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Проверьте настройки</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--error sf-alert--outlined flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >error</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Не удалось сохранить</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-2" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert--flat: только заливка</code >
<div class ="sf-alert sf-alert--neutral sf-alert--flat flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Обратите внимание</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--info sf-alert--flat flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Доступна новая версия</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--success sf-alert--flat flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Изменения сохранены</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--warning sf-alert--flat flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >warning</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Проверьте настройки</div >
</div >
</div >
</div >
<div class ="sf-alert sf-alert--error sf-alert--flat flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >error</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Не удалось сохранить</div >
</div >
</div >
</div >
</div >
</div >
Состав
Обязателен только заголовок. Пояснение, иконка, кнопки действий и кнопка
закрытия добавляются по задаче; иконка сама берёт цвет статуса, у neutral —
вспомогательный цвет текста. Размеров у уведомления нет: текст набран основным
размером.
sf-alert-text + sf-alert-supporting-text
Заголовок
Пояснение под заголовком набрано тем же размером.
sf-icon перед sf-alert-wrap
info
С иконкой
Иконка берёт цвет статуса.
sf-alert-buttons внутри sf-alert-wrap
warning
Есть несохранённые изменения
Сохраните их перед выходом.
Сохранить Не сохранять
кнопка закрытия — последний потомок блока
check_circle
Файл загружен
Кнопка закрытия удаляет уведомление.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert-text</code >
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Заголовок без пояснения</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert-text + sf-alert-supporting-text</code >
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Заголовок</div >
<div class ="sf-alert-supporting-text" >Пояснение под заголовком набрано тем же размером.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-icon перед sf-alert-wrap</code >
<div class ="sf-alert sf-alert--info sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >info</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >С иконкой</div >
<div class ="sf-alert-supporting-text" >Иконка берёт цвет статуса.</div >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >sf-alert-buttons внутри sf-alert-wrap</code >
<div class ="sf-alert sf-alert--warning sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >warning</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Есть несохранённые изменения</div >
<div class ="sf-alert-supporting-text" >Сохраните их перед выходом.</div >
</div >
<div class ="sf-alert-buttons flex flex-wrap items-center" >
<button type ="button" class ="sf-button sf-button--default sf-button--on-surface sf-button--size-1/2" data-action ="save" ><span class ="sf-button-text-container" >Сохранить</span ></button >
<button type ="button" class ="sf-button sf-button--link sf-button--on-surface sf-button--size-1/2" data-action ="discard" ><span class ="sf-button-text-container" >Не сохранять</span ></button >
</div >
</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >кнопка закрытия — последний потомок блока</code >
<div class ="sf-alert sf-alert--success sf-alert--default flex items-start" >
<i class ="sf-icon" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Файл загружен</div >
<div class ="sf-alert-supporting-text" >Кнопка закрытия удаляет уведомление.</div >
</div >
</div >
<button type ="button" class ="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex items-cross-center" data-close aria-label ="Закрыть уведомление" >
<span class ="sf-close sf-close--size-1 flex justify-center items-center" aria-hidden ="true" ><span class ="sf-close-icon" ></span ></span >
</button >
</div >
</div >
</div >
Доступность
Уведомлению, которое появляется динамически, задайте role="status" для
спокойного сообщения и role="alert" для срочной ошибки. Сообщению, которое
есть на странице с первой загрузки, живая роль не нужна.
Смысл передаёт текст; цвет и иконка его только поддерживают.
Кнопке закрытия нужно доступное имя: aria-label="Закрыть уведомление".
Если при закрытии фокус был внутри уведомления, приложение переносит его на
следующий осмысленный элемент: компонент удаляет блок вместе с фокусом.
JavaScript
Скрипт компонента обрабатывает нажатия внутри .sf-alert:
Атрибут на кнопке
Что происходит
data-action="значение"на блоке возникает событие sf-alert-action; уведомление остаётся
data-closeна блоке возникает событие sf-alert-close, затем блок удаляется
Кнопка «Скачать» в примере сообщает о выборе и оставляет уведомление на месте,
кнопка с крестиком удаляет его; после закрытия пример позволяет вернуть
уведомление.
Оба события всплывают. sf-alert-action несёт в detail поля action
(значение атрибута), alert и trigger; sf-alert-close — alert и
trigger. Недоступная кнопка (disabled или aria-disabled="true") событий
не вызывает. На время удаления блок получает класс closing и плавно гаснет на
токенах движения; при системной настройке уменьшения движения блок удаляется
сразу. data-alert-action, data-alert-close и класс sf-alert--close —
другие имена тех же атрибутов.
HTML wrap_text Wrap source lines content_copy Copy
<section class ="grid grid-col-1 gap-2" aria-label ="Интерактивный пример уведомления" data-alert-demo >
<div data-alert-demo-slot >
<div class ="sf-alert sf-alert--success sf-alert--default flex items-start" >
<i class ="sf-icon color-success" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Файл готов</div >
<div class ="sf-alert-supporting-text" >Отчёт сформирован и доступен для скачивания.</div >
</div >
<div class ="sf-alert-buttons flex flex-wrap items-center" >
<button type ="button" class ="sf-button sf-button--default sf-button--on-surface sf-button--size-1/2" data-action ="download" >
<span class ="sf-button-text-container" >Скачать</span >
</button >
</div >
</div >
<button type ="button" class ="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex items-cross-center" data-close aria-label ="Закрыть уведомление" >
<span class ="sf-close sf-close--size-1 flex justify-center items-center" aria-hidden ="true" ><span class ="sf-close-icon" ></span ></span >
</button >
</div >
</div >
<div data-alert-demo-result hidden >
<div class ="flex flex-wrap items-center gap-1" >
<p class ="m-0" role ="status" data-alert-demo-status >Уведомление закрыто.</p >
<button type ="button" class ="sf-button sf-button--outline sf-button--on-surface sf-button--size-1/2" data-alert-demo-restore >
<span class ="sf-button-text-container" >Показать снова</span >
</button >
</div >
</div >
<p class ="m-0" role ="status" data-alert-demo-action-result hidden ></p >
<template data-alert-demo-template >
<div class ="sf-alert sf-alert--success sf-alert--default flex items-start" >
<i class ="sf-icon color-success" aria-hidden ="true" >check_circle</i >
<div class ="sf-alert-wrap flex flex-col flex-1" >
<div class ="sf-alert-content flex flex-col flex-1" >
<div class ="sf-alert-text" >Файл готов</div >
<div class ="sf-alert-supporting-text" >Отчёт сформирован и доступен для скачивания.</div >
</div >
<div class ="sf-alert-buttons flex flex-wrap items-center" >
<button type ="button" class ="sf-button sf-button--default sf-button--on-surface sf-button--size-1/2" data-action ="download" >
<span class ="sf-button-text-container" >Скачать</span >
</button >
</div >
</div >
<button type ="button" class ="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex items-cross-center" data-close aria-label ="Закрыть уведомление" >
<span class ="sf-close sf-close--size-1 flex justify-center items-center" aria-hidden ="true" ><span class ="sf-close-icon" ></span ></span >
</button >
</div >
</template >
</section >
JavaScript wrap_text Wrap source lines content_copy Copy
document.querySelectorAll ('[data-alert-demo]' ).forEach ((demo ) => {
const slot = demo.querySelector ('[data-alert-demo-slot]' );
const template = demo.querySelector ('[data-alert-demo-template]' );
const closedResult = demo.querySelector ('[data-alert-demo-result]' );
const restoreButton = demo.querySelector ('[data-alert-demo-restore]' );
const actionResult = demo.querySelector ('[data-alert-demo-action-result]' );
demo.addEventListener ('click' , (event ) => {
const trigger = event.target.closest ('[data-action], [data-close]' );
const alert = trigger?.closest ('.sf-alert' );
if (! trigger || ! alert) return ;
if (trigger.matches ('[data-close]' )) {
event.preventDefault ();
alert.dispatchEvent (new CustomEvent ('sf-alert-close' , {
bubbles: true ,
detail: {alert, trigger},
}));
alert.remove ();
return ;
}
alert.dispatchEvent (new CustomEvent ('sf-alert-action' , {
bubbles: true ,
detail: {action: trigger.dataset.action, alert, trigger},
}));
});
demo.addEventListener ('sf-alert-action' , (event ) => {
if (event.detail?.action !== 'download' ) return ;
actionResult.textContent = 'Выбрано действие «Скачать». Уведомление осталось на странице.' ;
actionResult.hidden = false ;
});
demo.addEventListener ('sf-alert-close' , () => {
actionResult.hidden = true ;
closedResult.hidden = false ;
});
restoreButton.addEventListener ('click' , () => {
slot.replaceChildren (template.content.cloneNode (true ));
closedResult.hidden = true ;
actionResult.hidden = true ;
requestAnimationFrame (() => {
slot.querySelector ('[data-action]' )?.focus ();
});
});
});
Подписка на действие:
JavaScript wrap_text Wrap source lines content_copy Copy
document.addEventListener ('sf-alert-action' , (event ) => {
if (event.detail.action === 'download' ) startDownload ();
});
Классы
Что
Классы
Блок
sf-alert
Части
sf-alert-buttons, sf-alert-content, sf-alert-supporting-text, sf-alert-text, sf-alert-wrap
Модификаторы
sf-alert--default, sf-alert--error, sf-alert--flat, sf-alert--info, sf-alert--neutral, sf-alert--outlined, sf-alert--success, sf-alert--warning
Устаревшие
sf-alert--clear → sf-alert--neutral, sf-alert--danger → sf-alert--error
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Настройка
Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-alert) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.
Переменная
Что задаёт
По умолчанию
--sf-alert-background-colorЗаливка предупреждения.
var(--sf-surface-container); зависит от вида, статуса
--sf-alert-border-colorЦвет рамки.
var(--sf-outline); зависит от вида, статуса
--sf-alert-colorЦвет текста.
var(--sf-on-surface); зависит от вида, статуса
--sf-alert-border-widthШирина рамки со всех сторон.
var(--sf-px)
--sf-alert-radiusСкругление углов.
var(--sf-radius--surface)
--sf-alert-padding-inlineОтступ до и после содержимого по строчной оси.
var(--sf-space-1)
--sf-alert-padding-blockОтступ над и под содержимым.
var(--sf-space-1)
--sf-alert-gapПромежуток между иконкой, текстом и кнопками.
var(--sf-space-1)
CSS wrap_text Wrap source lines content_copy Copy
.sf-alert {
--sf-alert-radius : 0 ;
}
Устройство
Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-alert); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-alert--background-colorне задана; задают модификаторы, например .sf-alert.sf-alert--neutral.sf-alert--default: var(--sf-alert-background-color, var(--sf-surface-container))
background-color
--sf-alert--border-colorне задана; задают модификаторы, например .sf-alert.sf-alert--neutral.sf-alert--default: var(--sf-alert-border-color, var(--sf-outline))
border-color
--sf-alert--colorvar(--sf-alert-color, var(--sf-on-surface))color, --sf-alert-supporting-text--color, --sf-alert-text--color
--sf-alert--opacityне задана; задают модификаторы, например .sf-alert.closing: 0
opacity
--sf-alert-buttons--background-colorне задана; задают модификаторы, например .sf-alert .sf-alert-buttons: transparent
background-color
--sf-alert-buttons--gapне задана; задают модификаторы, например .sf-alert .sf-alert-buttons: var(--sf-space-1/3)
gap
--sf-alert-content--background-colorне задана; задают модификаторы, например .sf-alert .sf-alert-content: transparent
background-color
--sf-alert-content--gapне задана; задают модификаторы, например .sf-alert .sf-alert-content: var(--sf-space-1/2)
gap
--sf-alert-supporting-text--colorне задана; задают модификаторы, например .sf-alert .sf-alert-supporting-text: var(--sf-alert--color)
color
--sf-alert-supporting-text--font-familyне задана; задают модификаторы, например .sf-alert .sf-alert-supporting-text: var(--sf-text--family)
font-family
--sf-alert-supporting-text--font-sizeне задана; задают модификаторы, например .sf-alert .sf-alert-supporting-text: var(--sf-text-size-1)
font-size
--sf-alert-supporting-text--font-weightне задана; задают модификаторы, например .sf-alert .sf-alert-supporting-text: var(--sf-font-weight-regular)
font-weight
--sf-alert-supporting-text--line-heightне задана; задают модификаторы, например .sf-alert .sf-alert-supporting-text: var(--sf-text-height-1)
line-height
--sf-alert-text--colorне задана; задают модификаторы, например .sf-alert .sf-alert-text: var(--sf-alert--color)
color
--sf-alert-text--font-familyне задана; задают модификаторы, например .sf-alert .sf-alert-text: var(--sf-text--family)
font-family
--sf-alert-text--font-sizeне задана; задают модификаторы, например .sf-alert .sf-alert-text: var(--sf-text-size-1)
font-size
--sf-alert-text--font-weightне задана; задают модификаторы, например .sf-alert .sf-alert-text: var(--sf-font-weight-medium)
font-weight
--sf-alert-text--line-heightне задана; задают модификаторы, например .sf-alert .sf-alert-text: var(--sf-text-height-1)
line-height
--sf-alert-wrap--background-colorне задана; задают модификаторы, например .sf-alert .sf-alert-wrap: transparent
background-color
--sf-alert-wrap--gapне задана; задают модификаторы, например .sf-alert .sf-alert-wrap: var(--sf-space-1)
gap
См. также
Предыдущая Обратная связь и состояние Следующая Всплывающие сообщения
