16K ·GitHub
Что это такое?
Набор библиотек и инструментов с открытым исходным кодом от Adobe для создания адаптивных, доступных и надёжных пользовательских интерфейсов на React.
Набор библиотек и инструментов с открытым исходным кодом от Adobe для создания адаптивных, доступных и надёжных пользовательских интерфейсов на React.Это одна библиотека компонентов или несколько?Это набор отдельных библиотек: React Spectrum (дизайн-система Adobe в виде готовых компонентов для React), React Aria (доступные компоненты и хуки без стилей) и React Stately (хуки для управления состоянием).
Это набор отдельных библиотек: React Spectrum (дизайн-система Adobe в виде готовых компонентов для React), React Aria (доступные компоненты и хуки без стилей) и React Stately (хуки для управления состоянием).Как начать использовать её в своём приложении?Выберите библиотеку под свою задачу и установите её из npm: React Spectrum — если нужна готовая библиотека компонентов со стилями, React Aria — если вы пишете свои компоненты и оформляете их сами.
Выберите библиотеку под свою задачу и установите её из npm: React Spectrum — если нужна готовая библиотека компонентов со стилями, React Aria — если вы пишете свои компоненты и оформляете их сами.Нужно ли что-то ещё, кроме React?Только React — библиотеки ставятся как npm-пакеты. Кроме того, скрипт в репозитории подготавливает совместимость со старыми окружениями React 16.8.
Только React — библиотеки ставятся как npm-пакеты. Кроме того, скрипт в репозитории подготавливает совместимость со старыми окружениями React 16.8.Не привязывает ли React Spectrum к визуальному стилю Adobe?React Spectrum поставляется с оформлением дизайн-системы Spectrum от Adobe, так что вместе с ним вы принимаете и этот визуальный стиль. Если нужен полный контроль над стилями и структурой DOM, собирайте компоненты на неоформленных хуках React Aria.
React Spectrum поставляется с оформлением дизайн-системы Spectrum от Adobe, так что вместе с ним вы принимаете и этот визуальный стиль. Если нужен полный контроль над стилями и структурой DOM, собирайте компоненты на неоформленных хуках React Aria.Чем обеспечивается доступность компонентов?Поведение компонентов следует рекомендациям WAI-ARIA Authoring Practices с полной поддержкой скринридеров и навигации с клавиатуры, а сами компоненты протестированы на множестве скринридеров и устройств.
Поведение компонентов следует рекомендациям WAI-ARIA Authoring Practices с полной поддержкой скринридеров и навигации с клавиатуры, а сами компоненты протестированы на множестве скринридеров и устройств.Поддерживается ли локализация из коробки?Да — поддержка более 30 языков уже включена, в том числе языков с письмом справа налево, а также форматирование дат и чисел. Есть и отдельные i18n-библиотеки, не привязанные к фреймворку.
Да — поддержка более 30 языков уже включена, в том числе языков с письмом справа налево, а также форматирование дат и чисел. Есть и отдельные i18n-библиотеки, не привязанные к фреймворку.Можно ли настроить темы компонентов или получить тёмный режим?Компоненты React Spectrum поддерживают собственные темы и автоматически переключаются в тёмный режим. Для более глубокой кастомизации можно собрать свои компоненты на хуках React Aria и React Stately.
Компоненты React Spectrum поддерживают собственные темы и автоматически переключаются в тёмный режим. Для более глубокой кастомизации можно собрать свои компоненты на хуках React Aria и React Stately.Зачем Adobe это создала?Заявленная цель — сделать разработку дизайн-систем и библиотек компонентов максимально простой, сохраняя при этом качественные взаимодействия и доступность — чтобы поднять планку качества веб-приложений.
Заявленная цель — сделать разработку дизайн-систем и библиотек компонентов максимально простой, сохраняя при этом качественные взаимодействия и доступность — чтобы поднять планку качества веб-приложений.What are similar projects?base-ui, chakra-ui, arc-library, primitives, Libraries.dev, astryx, kumo, vant
base-ui, chakra-ui, arc-library, primitives, Libraries.dev, astryx, kumo, vantWhich topics is it in?wai-aria, internationalization, design-systems, react-components, hooks, responsive, ui-library, state-management, dark-mode, accessibility, component-library, i18n
wai-aria, internationalization, design-systems, react-components, hooks, responsive, ui-library, state-management, dark-mode, accessibility, component-library, i18n