Використання вертикальних слайдерів у користувацьких інтерфейсах має широкий спектр застосувань, таких як вертикальні меню, варіанти навігації, списки контенту або навіть форми чи панелі налаштувань. Тому ці компоненти повинні мати можливість адаптуватися до будь-яких ситуацій, що можуть виникнути. У цій статті ми хочемо продемонструвати гнучке рішення для цього широко використовуваного компонента. Наприкінці посту ви знайдете приклад коду, створений за допомогою React і TailwindCSS.
Перший підхід
TailwindCSS, з його підходом utility-first і широким набором CSS класів, дозволяє швидко стилізувати та будувати елементи користувацького інтерфейсу. Коли справа доходить до більш складних компонентів, таких як вертикальний слайдер, інколи наявні за замовчуванням варіанти не зовсім відповідають бажаному дизайну або поведінці. Розробка власного рішення дає можливість визначати структуру та вигляд такого меню відповідно до специфічних потреб продукту.
Ми хочемо дати компоненту можливість визначати анімації переходів, реалізувати специфічні механізми прокручування та обробку подій дотиків для створення інтуїтивно зрозумілого та привабливого користувацького досвіду.
Виклик
Окрім того, щоб слайдер відкривався та закривався з анімацією, одним з найбільших викликів при створенні цього макету є позиціонування елементів. Саме тому ми намагаємося створити компонент, який вирішить це завдання. За допомогою цього компонента ми можемо передавати контент, який хочемо відобразити, і він автоматично зрозуміє, як його позиціонувати та, якщо потрібно, дозволить йому рости по висоті з вертикальним прокручуванням.
Для досягнення цієї мети ми використаємо деякі властивості Headless-UI, набору незатилених і доступних компонентів UI, призначених для легкого інтегрування з TailwindCSS.
Рішення
Ми можемо почати з використання компонента Dialog (Modal) з Headless-UI. Це компонент без рендеру, наповнений можливостями доступності та роботи з клавіатурою. Діалоги будуються за допомогою компонентів Dialog.Panel, Dialog.Title та Dialog.Description.
setIsOpen(false)}> Це мій заголовок
Це мій контент
``` Це вже займається показом і приховуванням нашої панелі, що відбувається, коли користувач натискає за межами нашого `Dialog.Panel` або натискає клавішу `Escape`. Зверніть увагу, що ми додали кілька CSS властивостей до контенту, щоб відокремити його від заголовка. Пам'ятайте, що ідея полягає в тому, щоб керувати контентом ззовні (тільки позиціонування зсередини). Отже, це ще не фінальне рішення. Тепер, оскільки це слайдер, наступне, що ми хочемо зробити, — це позиціонувати його з правого боку екрану з повною висотою. Ми можемо зробити це за допомогою `inset-y-0 right-0`. Також для мобільних пристроїв ми хочемо переконатися, що вся панель займає всю ширину, тож давайте зробимо це:
``` setIsOpen(false)}>
Це мій заголовок
Це мій контент
``` Виглядає вже добре! Тепер ми можемо додати анімацію для плавнішого користувацького досвіду. Завдяки Headless-UI це просто реалізувати. Ми можемо використовувати `Transition`, який контролює, чи повинні дочірні елементи бути видимими або прихованими, та набір властивостей життєвого циклу (як-от `enterFrom`, і `leaveTo`). Для цього конкретного слайдера ми також хочемо мати фон злегка іншого кольору.
Для цього ми хочемо використати `Transition.Children` та `Transition.Root`, щоб ізолювати анімації між фоном накладки (backdrop overlay) та `Dialog.Panel`.
setIsOpen(false)}> {/* Накладка фону /}
{/ Слайд панель /} Це мій заголовок
Це мій контент
Зверніть увагу, як слайдер панель з'являється з `translate-x-full`, що є початковою точкою (прихована), і переміщається в `translate-x-0`, займаючи своє відповідне місце. Добре! Ми майже там. Тепер потрібно налаштувати позиціонування елементів всередині модального вікна. Пам'ятайте, що ми хочемо зробити це модульним, тому воно повинно мати можливість адаптуватися до будь-якого контенту, який ми передамо. Ми можемо обернути весь `Dialog.Panel` і додати йому деякі CSS властивості, такі як `overflow-y-scroll` і `flex-col`, щоб позиціонувати елементи один під одним і дозволити прокручування, якщо контент стає занадто великим. setIsOpen(false)}> {/ Накладка фону /}
{/ Слайд панель */}
Це мій заголовок
Це мій контент
``` Добре, тепер ми можемо сказати, що маємо свою власну Слайдер Панель, але вона ще не повністю готова, поки не зробимо її багаторазовою для всього додатка. Давайте попрацюємо над цим.
Зробимо її модульною
Ми завершили основну функціональність цього компонента, який полягає в показі та приховуванні інформації з відповідними стилями. Тепер, щоб використовувати її в будь-якому місці, ми можемо просто передавати контент через пропси. Для цього давайте визначимо title і children як інформацію для відображення, а також open і onClose для обробників подій.
export default function SliderPanel({title = '', children, open, setOpen})
І ми можемо легко використовувати її так:
Це мій контент
Стан open і setOpen корисні для того, щоб керувати поведінкою компонента.
У нашому прикладі коду нижче ви знайдете додатковий елемент — button, який відповідає за цю ситуацію. Але, ймовірно, ваша реалізація того, як відкривати та закривати це модальне вікно, може бути іншою. Тому добре мати ці пропси, які дозволяють адаптувати компонент під інші обставини.
Не соромтеся перевірити наш `` і навіть погратися з ним!
Перекладено з: React by example: Slider Panel