Перейти до вмісту

Vaul — це неоформлений компонент висувної панелі, розроблений спеціально для застосунків React. Він слугує заміною діалогового вікна й оптимізований для використання на планшетах і мобільних пристроях. Компонент створено з урахуванням гнучкості, тож розробники можуть налаштовувати його поведінку та вигляд у своїх застосунках.

Одна з ключових можливостей — масштабування фону під час відкриття панелі, що створює ефект повнішого занурення. Панеллю можна керувати програмно, змінюючи її стан відкриття за допомогою керування станом у React.

Vaul має простий API для інтеграції та чітко визначені компоненти, як-от Drawer.Root, Drawer.Trigger, Drawer.Content і Drawer.Overlay. Це допомагає впорядковано додавати компонент до застосунків. Бібліотека підтримує різні можливості, зокрема точки фіксації для зручнішої взаємодії, налаштування контейнера панелі та режим, у якому її не можна закрити.

Цей компонент підійде розробникам, які хочуть додати адаптивну висувну панель для мобільних пристроїв без обмежень, пов’язаних зі стилізованими компонентами, що можуть конфліктувати із системою дизайну застосунку.

Приклади використання можна переглянути в інтерактивних демонстраціях на CodeSandbox. Вони показують різні можливості компонента, зокрема керування прокручуванням і налаштування точок фіксації.

Можливості

  • Неоформлений компонент висувної панелі
  • Оптимізація для мобільних пристроїв і планшетів
  • Масштабування фону
  • Налаштовувані точки фіксації
  • Програмне керування станом відкриття
  • Підтримка вкладених висувних панелей
  • Гнучке розташування вмісту
  • Власний портал для відображення

Пов’язані матеріали

BaseUI

Безголові компоненти React без стилів для створення доступних, гнучко налаштовуваних інтерфейсів із повним контролем над стилями.

PrimeVue

Багатий набір відкритих UI-компонентів для легкої та ефективної розробки застосунків на Vue.js.

Radix Primitives

Не стилізовані, доступні примітиви React із відкритим кодом для високоякісних вебзастосунків і дизайн-систем.

ArkUI

Це відкрите UI-рішення дає змогу створювати складні дизайн-системи за допомогою компонентів, які можна налаштувати відповідно до різних візуальних стилів і стандартів доступності.

ChakraUI

Швидко й ефективно створюйте доступні вебзастосунки за допомогою набору основних компонентів, які легко використовувати та гнучко налаштовувати.

cmdk

Цей компонент — комплексне рішення для меню команд у React, що поєднує зручність для користувачів із гнучкістю для розробників.

Docusaurus

Проєкт для простого створення сайтів документації, що дає змогу зосередитися на вмісті та зручності використання.

MagicUI

Універсальна добірка чудово розроблених компонентів, що покращить ваші вебпроєкти та спростить процес дизайну.