mirror of
https://github.com/ershisan99/flashcards-docs.git
synced 2025-12-16 20:59:26 +00:00
51 lines
2.7 KiB
Plaintext
51 lines
2.7 KiB
Plaintext
# Headless компоненты, универсальный доступ, Radix UI
|
||
|
||
## Headless компоненты
|
||
|
||
### Теория
|
||
|
||
Headless компоненты - это компоненты, которые не имеют своего визуального представления, но
|
||
предоставляют нам API для управления внутренним состоянием компонента, а также поддерживают
|
||
универсальный доступ из коробки (взаимодействие с помощью клавиатуры, поддержка screen reader'ов и
|
||
т.д.). Такие компоненты удобно использовать когда у нас есть готовый дизайн и мы не хотим писать всю
|
||
логику с нуля.
|
||
|
||
#### Популярные библиотеки headless компонентов
|
||
|
||
- [Radix UI](https://www.radix-ui.com/primitives)
|
||
- [Headless UI](https://headlessui.dev/)
|
||
- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
|
||
- [Base UI от MUI (beta)](https://mui.com/base-ui/getting-started/overview/)
|
||
|
||
Мы будем использовать Radix UI Primitives (не Themes!), потому что она предоставляет все нужные нам
|
||
компоненты и с ней просто взаимодействовать.
|
||
|
||
### Материалы для изучения:
|
||
|
||
#### Видео на тему ui библиотек
|
||
|
||
- [So You Think You Can Build A Dropdown? - Pedro Duarte](https://youtu.be/pcMYcjtWwVI)
|
||
- [Сравнение MUI, Tailwind, Bootstrap](https://youtu.be/CQuTF-bkOgc)
|
||
- [Radix overview](https://www.youtube.com/watch?v=EUrbuROiuaA)
|
||
- [Shadcn UI - библиотека компонентов на основе Radix UI и TailwindCss](https://www.youtube.com/watch?v=7MKEOfSP2s4)
|
||
|
||
#### Откуда начать?
|
||
|
||
##### Библиотека компонентов it-incubator:
|
||
|
||
Построена на базе Radix UI и Headless UI, для стилизации используется SASS.
|
||
|
||
- [Github](https://github.com/it-incubator/incubator-libs/tree/dev/packages/ui-kit/src/components)
|
||
- [Storybook](https://ui-kit.it-incubator.io/?path=/docs/getting-started-installation--docs)
|
||
|
||
Многие вопросы отпадут если просто посмотреть код.
|
||
|
||
##### Shadcn UI
|
||
|
||
Компоненты которые можно копировать и вставлять в свой проект.
|
||
|
||
Конечно же есть нюансы, но в целом это хороший способ понять как работает Radix UI.
|
||
|
||
- [Github](https://github.com/shadcn/ui)
|
||
- [Docs](https://ui.shadcn.com/)
|