Уведомления, сообщения, метки, прогресс

Четыре элемента этого урока сообщают пользователю о чём-то: «бронь подтверждена», «осталось 3 места», «загружено 60%». Notification — цветная плашка с текстом, message — плашка с заголовком, tag — маленькая метка, progress — полоса прогресса. Все принимают те же цветовые модификаторы, что и кнопки.

Уведомление

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="notification is-success is-light">
  <button class="delete" aria-label="Закрыть"></button>
  Стол на 4 гостей забронирован на пятницу, 19:00.
</div>

Светло-зелёная плашка с текстом и серым крестиком в правом верхнем углу. Без is-light фон будет насыщенным зелёным, а цвет текста Bulma подберёт сама.

Крестик сам ничего не закрывает — нужен обработчик:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="notification is-warning">
  <button class="delete" aria-label="Закрыть"></button>
  Кухня закрывается через 30 минут.
</div>
 
<script>
  document.querySelectorAll('.notification .delete').forEach((button) => {
    button.addEventListener('click', () => button.parentElement.remove());
  });
</script>

Нажмите на крестик — жёлтая плашка исчезнет: скрипт удаляет родителя кнопки, то есть само уведомление.

Сообщение

message — блок с цветным заголовком message-header и телом message-body. Он подходит для пояснений, которые должны остаться на странице:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<article class="message is-info">
  <div class="message-header">
    <p>Аллергены</p>
  </div>
  <div class="message-body">
    Блюда с орехами отмечены в меню. Сообщите официанту, если у вас аллергия.
  </div>
</article>

Синий заголовок и светло-голубое тело с тёмным текстом. Заголовок можно опустить — останется только тело с цветной полосой слева.

Метки

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="tags">
  <span class="tag is-success">Вегетарианское</span>
  <span class="tag is-danger is-light">Острое</span>
  <span class="tag is-warning is-rounded">Новинка</span>
</div>
 
<div class="tags has-addons">
  <span class="tag is-dark">Статус</span>
  <span class="tag is-info">Готовится</span>
</div>

Первая строка — три метки разного цвета с промежутками: обёртка tags выстраивает их в ряд. Вторая — две метки, склеенные в одну «Статус | Готовится». Так в таблице заказов показывают статус. Модификаторы is-medium и is-large увеличивают метку, а <button class="delete is-small"> внутри неё добавляет крестик.

Прогресс

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<progress class="progress is-primary" value="60" max="100">60%</progress>
<progress class="progress is-small is-info" max="100">Загрузка</progress>

Первая полоса заполнена на 60%. У второй нет атрибута value, и по ней бежит анимация — так показывают загрузку, длительность которой неизвестна. Текст внутри тега видят только старые браузеры и программы чтения с экрана.

Частая ошибка

Использовать notification для подсказки, которая должна быть видна всегда, и давать ей крестик. Гость закроет плашку и потеряет важную информацию. Для временных сообщений берите notification с кнопкой delete, для постоянных пояснений — message без неё.