Оповещения

Назначение компонента Alert

Компонент Alert (оповещение) используется для отображения важных сообщений пользователю. Он может информировать о успешном выполнении операции, предупреждать о потенциальных проблемах, сообщать об ошибках или предоставлять другую важную информацию. Alert обычно выделяется визуально, чтобы привлечь внимание пользователя, и может содержать текст, иконки, кнопки и ссылки.

HTML-структура

Основные классы и их назначение:
  1. .sf-alert:
    • Базовый класс для всех типов оповещений.
    • Определяет общие стили для всех Alert, такие как отступы, цвет текста, границы и фон.
  2. Модификаторы (состояния) для .sf-alert:
    • sf-alert--primary: Alert с цветом primary, используется для важных сообщений.
    • sf-alert--secondary: Alert с цветом secondary, используется для второстепенных сообщений.
    • sf-alert--error: Alert с цветом error, используется для сообщений об ошибках.
    • sf-alert--warning: Alert с цветом warning, используется для предупреждений.
    • sf-alert--success: Alert с цветом success, используется для сообщений об успешном выполнении.
  3. Классы внутренних элементов:
    • sf-alert-column-1: Колонка для иконки (например, иконка ошибки или предупреждения).
    • sf-alert-column-2: Основная колонка для текста (заголовок, тело и ссылки).
    • sf-alert-column-3: Колонка для кнопки закрытия Alert.

CSS-стили

  1. Общие стили для sf-alert:
    • Определяются переменные CSS (--sf-alert--background-color, --sf-alert--border-color, --sf-alert--color), которые задают фон, цвет границы и текста.
    • Используется CSS Grid для расположения колонок.
  2. Стили для модификаторов:
    • Каждый модификатор (например, sf-alert--primary, sf-alert--error) переопределяет переменные CSS, чтобы изменить цвет фона, границы и текста в зависимости от типа Alert.
  3. Стили для иконок:
    • Иконки управляются через переменные CSS --sf-icon--fill, --sf-icon--weight, --sf-icon--font-family и др.
    • Классы icon-solid, icon-medium, icon-rounded и icon-sharp изменяют внешний вид иконок.
  4. Стили для кнопки закрытия:
    • Кнопка закрытия (в sf-alert-column-3) имеет стили, которые убирают стандартные стили кнопки (all: unset) и добавляют курсор в виде указателя (cursor: pointer).
  5. Стили для ссылок:
    • Ссылки внутри Alert имеют стили, которые убирают подчеркивание и наследуют цвет текста.

Список переменных

Название переменной Значение по умолчанию
--sf-icon-line-height inherit
--sf-icon-font-size inherit
--sf-icon--fill 0
--sf-icon--weight var(--sf-text--weight)
--sf-icon--grade 0
--sf-icon--optical-size inherit
--sf-icon--font-family 'Material Symbols Outlined'
--sf-icon-color var(--sf-on-surface-variant)
--sf-alert--background-color transparent
--sf-alert--border-width var(--sf-a1)
--sf-alert--border-color var(--sf-outline-variant)
--sf-alert--border-style solid
--sf-alert--color inherit

Примеры состояний

1. Стандартный Alert .sf-alert--standart
error

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

      
        <div class = "sf-alert sf-alert--standart">
              <div class = "sf-alert-icon">
                <i class="sf-icon">error</i>
              </div>
              <div class = "sf-alert-content">
                  <p>
                      <span class="sf-alert-content--title">We’ve just released a new feature</span>
                      
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                  </p>
              
              <p class = "sf-alert-content--footer">
                <a href="#">Learn more</a>
                <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
              </p>
              </div>
              
              <div class = "sf-alert-close">
                <button>
                  <i class="sf-icon sf-icon-solid">close</i>      
                  </button>
              </div>
          </div>
2. Primary Alert (.sf-alert--primary):
error

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

      
        <div class = "sf-alert sf-alert--primary">
            <div class = "sf-alert-icon">
              <i class="sf-icon">error</i>
             </div>
             <div class = "sf-alert-content">
                <p>
                    <span class="sf-alert-content--title">We’ve just released a new feature</span>
                    
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                </p>
            <p class = "sf-alert-content--footer ">
              <a href="#">Learn more</a>
              <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
             </p>
            </div>
            
            <div class = "sf-alert-close">
              <button>
                <i class="sf-icon sf-icon-solid">close</i>      
                </button>
            </div>
          </div>

Используются следующие переменные:

  1. Фон: var(--sf-primary-95).
  2. Граница: var(--sf-primary-70).
  3. Цвет текста: var(--sf-primary-50).
3. Secondary Alert (.sf-alert--secondary):
error

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

          
            <div class = "sf-alert sf-alert--secondary">
                <div class = "sf-alert-icon">
                  <i class="sf-icon">error</i>
                </div>
                <div class = "sf-alert-content">
                    <p>
                        <span class="sf-alert-content--title">We’ve just released a new feature</span>
                        
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                    </p>
                <p class = "sf-alert-content--footer ">
                  <a href="#">Learn more</a>
                  <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
                </p>
                </div>
                
                <div class = "sf-alert-close">
                  <button>
                    <i class="sf-icon sf-icon-solid">close</i>      
                    </button>
                </div>
              </div>
4. Error Alert .sf-alert--error:
error

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

          
            <div class = "sf-alert sf-alert--error">
                <div class = "sf-alert-icon">
                  <i class="sf-icon">error</i>
                </div>
                <div class = "sf-alert-content">
                    <p>
                        <span class="sf-alert-content--title">We’ve just released a new feature</span>
                        
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                    </p>
                <p class = "sf-alert-content--footer ">
                  <a href="#">Learn more</a>
                  <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
                </p>
                </div>
                
                <div class = "sf-alert-close">
                  <button>
                    <i class="sf-icon sf-icon-solid">close</i>      
                    </button>
                </div>
              </div>
  1. Фон: var(--sf-error-95).
  2. Граница: var(--sf-error).
  3. Цвет текста: var(--sf-error-40).
4. Warning Alert .sf-alert--warning:
warning

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

          
            <div class = "sf-alert sf-alert--warning">
                <div class = "sf-alert-icon">
                  <i class="sf-icon">warning</i>
                </div>
                <div class = "sf-alert-content">
                    <p>
                        <span class="sf-alert-content--title">We’ve just released a new feature</span>
                        
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                    </p>
                <p class = "sf-alert-content--footer ">
                  <a href="#">Learn more</a>
                  <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
                </p>
                </div>
                
                <div class = "sf-alert-close">
                  <button>
                    <i class="sf-icon sf-icon-solid">close</i>      
                    </button>
                </div>
              </div>
  1. Фон: var(--sf-warning-95).
  2. Граница: var(--sf-warning).
  3. Цвет текста: var(--sf-warning-40).
5. Success Alert .sf-alert--success:
check_circle

We’ve just released a new feature Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

Learn more View changes arrow_forward 

          
            <div class = "sf-alert sf-alert--success">
                <div class = "sf-alert-icon">
                  <i class="sf-icon">check_circle</i>
                </div>
                <div class = "sf-alert-content">
                    <p>
                        <span class="sf-alert-content--title">We’ve just released a new feature</span>
                        
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
                    </p>
                <p class = "sf-alert-content--footer ">
                  <a href="#">Learn more</a>
                  <a href="#">View changes  <i class="sf-icon sf-icon-medium">arrow_forward</i> </a>
                </p>
                </div>
                
                <div class = "sf-alert-close">
                  <button>
                    <i class="sf-icon sf-icon-solid">close</i>      
                    </button>
                </div>
              </div>
  1. Фон: var(--sf-success-95).
  2. Граница: var(--sf-success).
  3. Цвет текста: var(--sf-success-40).

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