Bootstrap 5: Offcanvas, Accordion, Toasts, Placeholders, Floating Labels, Scrollspy

В Bootstrap 5 было добавлено несколько новых компонентов, которые значительно расширили возможности фреймворка. Рассмотрим их подробно с примерами кода.

1. Offcanvas (Офканвас)

Описание:
Offcanvas — это компонент, который позволяет создавать боковые панели (слайдеры), которые появляются поверх основного контента. Это полезно для мобильных меню, дополнительных панелей или всплывающих окон.

Пример:

<!-- Кнопка для открытия Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Открыть Offcanvas
</button>

<!-- Offcanvas панель -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Заголовок Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Это содержимое Offcanvas. Оно может быть текстом, формой или чем угодно.</p>
  </div>
</div>

Особенности:

• Можно разместить панель слева (offcanvas-start), справа (offcanvas-end), сверху (offcanvas-top) или снизу (offcanvas-bottom).
• Используется атрибут data-bs-toggle="offcanvas" для активации.

2. Accordion (Аккордеон)

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

Пример:

<div class="accordion" id="accordionExample">
  <!-- Первый элемент аккордеона -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Заголовок первого элемента
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Содержимое первого элемента аккордеона.
      </div>
    </div>
  </div>

  <!-- Второй элемент аккордеона -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Заголовок второго элемента
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Содержимое второго элемента аккордеона.
      </div>
    </div>
  </div>
</div>

Особенности:

• Атрибут data-bs-parent гарантирует, что только один элемент будет открыт одновременно.
• Класс collapsed используется для закрытых элементов.

3. Toasts (Тосты)

Описание:
Toasts — это небольшие уведомления, которые появляются на экране для информирования пользователя о событиях (например, успешной отправке формы). Они похожи на всплывающие уведомления.

Пример:

<!-- Контейнер для тостов -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Уведомление</strong>
      <small>сейчас</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Это пример тоста.
    </div>
  </div>
</div>

<!-- JavaScript для активации тоста -->
<script>
  var toastElList = [].slice.call(document.querySelectorAll('.toast'));
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl);
  });
  toastList.forEach(toast => toast.show());
</script>

Особенности:

• Тосты можно размещать в любом месте страницы с помощью классов позиционирования, таких как position-fixed.
• Для автоматического закрытия можно использовать атрибут data-bs-autohide="true".

4. Placeholders (Заглушки)

Описание:
Placeholders — это компонент для создания заглушек, которые используются для отображения «скелетонов» контента во время загрузки данных. Это улучшает восприятие пользователем процесса загрузки.

Пример:

<div class="card" aria-hidden="true">
  <img src="placeholder.jpg" class="card-img-top" alt="Placeholder image">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Особенности:

• Класс placeholder-glow создаёт эффект мерцания, а placeholder-wave — волновой эффект.
• Можно настраивать ширину заглушек с помощью классов col-*.

5. Floating Labels (Плавающие метки)

Описание:
Floating Labels — это компонент для создания полей ввода с метками, которые «поднимаются» над полем при фокусе или заполнении.

Пример:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email адрес</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Пароль">
  <label for="floatingPassword">Пароль</label>
</div>

Особенности:

• Класс form-floating автоматически поднимает метку, когда поле получает фокус или заполняется.
• Подходит для современных форм с минималистичным дизайном.

6. Scrollspy с улучшенной производительностью

Описание:
Scrollspy был улучшен для более точного отслеживания прокрутки. Теперь он работает быстрее и эффективнее.

Пример:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">Первая секция</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Вторая секция</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">Первая секция</h4>
  <p>Содержимое первой секции.</p>
  <h4 id="scrollspyHeading2">Вторая секция</h4>
  <p>Содержимое второй секции.</p>
</div>

Особенности:

• Улучшена производительность и точность отслеживания.
• Можно настраивать смещение с помощью атрибута data-bs-offset.

Заключение

Bootstrap 5 добавил несколько мощных компонентов, таких как Offcanvas, Accordion, Toasts, Placeholders и Floating Labels. Эти компоненты делают разработку интерфейсов ещё проще и удобнее, особенно для современных веб-приложений.