Привет сообщество разработчиков 👋
Вместе с моими друзьями из сообщества Flowbite, мы поставляем совершенно новый компонент Drawer, который позволяет вам показывать или скрывать элемент вне канвы относительно страницы документа на основе нескольких размещений: сверху, справа, снизу и слева.
Вот предварительный просмотр компонента «Ящик» по умолчанию:
Компонент работает с чистыми классами Tailwind CSS, и вам нужно только включить JS-скрипт, чтобы заставить его работать с атрибутами данных и Drawer API (программно через JS).
Мы также создали несколько примеров, таких как:
- ящик по умолчанию (заголовок, описание и CTA-кнопки)
- контактная форма
- элементы формы, включая выбор даты
- навигационное меню/боковая панель
Все компоненты имеют темный режим, отзывчивы и могут быть легко настроены путем добавления любых элементов внутри них, а также вы можете изменять высоту и ширину ящика.
Еще одна функция, которую мы создали — это компонент swipeable edge, который позволяет смещать ящик с заданной высотой так, что вы можете показать небольшую его часть, когда он неактивен.
С большим ❤️ от сообщества Flowbite.
Ссылки:
- Tailwind CSS Drawer — Flowbite
- Репозиторий GitHub
Вот полный список компонентов ящика в качестве предварительного просмотра:
Навигация в ящике (боковая панель)
Используйте этот пример, чтобы показать навигационную боковую панель внутри компонента ящика.
👉 Получить исходный код.
Контактная форма ящика
Используйте этот пример, чтобы показать контактную форму внутри компонента ящика.
👉 Получить исходный код.
Элементы формы ящика
Используйте этот пример, если вы хотите добавить элементы формы внутри компонента ящика, включая кнопки выбора даты.
Размещение ящика
Используйте параметры размещения, чтобы расположить компонент ящика на верхней, правой, нижней или левой стороне страницы документа. Это можно сделать с помощью атрибута данных data-drawer-placement="{top|right|bottom|left}", где значение по умолчанию — «left».
👉 Узнайте больше о размещении ящиков.
Пролистываемый край
Функциональность края ящика позволяет показать небольшую часть ящика, когда он не отображается полностью, применяя атрибут данных data-drawer-edge="{true|false}".
В этом примере мы также используем параметр data-drawer-toggle="id", чтобы переключить видимость компонента ящика, щелкнув на «краевой» части элемента.
Используйте атрибут данных data-drawer-edge-offset="bottom-[*px]", где вы можете применить класс из Tailwind CSS для установки смещения. Значение по умолчанию — bottom-[60px].
👉 Узнайте больше о ящике с пролистываемым краем.
Темный режим
Все эти компоненты ящиков поддерживают темный режим, если он включен с помощью Tailwind CSS.