Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Достъпността трябва да бъде един от основните ви приоритети по време на разработката. Достъпните компоненти подобряват използваемостта на приложението и разширяват аудиторията му. Създаването на достъпни приложения обаче може да бъде скъпо по отношение на времето за изграждане и тестване.

За да спестите време, можете да използвате библиотека с компоненти на потребителския интерфейс, която предоставя достъпни компоненти, които са щателно тествани. Примери за достъпни библиотеки с компоненти на UI са Chakra UI, Radix UI, Material UI, Headless UI и Next UI.

Chakra UI е проста библиотека с компоненти, която е чудесна за създаване на приложения, които са достъпни. С 1,4 милиона изтегляния на месец, тази библиотека с потребителски интерфейс се разраства бързо и със сигурност ще намерите отговори, когато се затрудните да я използвате. Той е композируем и предоставя компоненти, които са малки с минимална сложност. Този подход увеличава възможностите за персонализиране, тъй като разработчиците могат да комбинират тези малки компоненти, за да създадат по-големи.

instagram viewer

Chakra UI има безплатна версия и платени версии. Безплатната версия обаче е достатъчна за малки проекти.

Основни характеристики на потребителския интерфейс на Chakra

  • Компонентите на потребителския интерфейс на Chakra следват стандартите WAI-ARIA и всички са достъпни.
  • Компонентите могат да се персонализират и можете да ги промените, за да отговарят на вашите изисквания за дизайн.
  • Компонентите са композируеми. Можете лесно да ги комбинирате, за да изградите по-големи компоненти.
  • Библиотеката на Chakra UI е безопасна за тип, както е написано на TypeScript.
  • Има голяма подкрепа от общността и обширна документация.
  • Той предлага светъл и тъмен потребителски интерфейс, който елиминира сложността на прилагане на тъмен режим във вашето приложение React.
  • Той поддържа мобилен дизайн и всеки компонент е отзивчив.

Следвай Ръководство за инсталиране на Chakra UI за да започнете да използвате Chakra UI във вашия проект.

Radix UI е библиотека с отворен код за изграждане на достъпни уеб приложения и системи за проектиране. Radix предлага примитиви, икони и цветове.

Radix примитивите са нестилизирани, достъпни компоненти. Примитивите ускоряват разработката, като се грижат за трудни части като съответствие с WAI-ARIA, навигация с клавиатура и управление на фокуса. Тъй като те идват без стил, вие сте свободни да приложите своя дизайн със стилно решение по ваш избор.

Радиксни цветове осигурете достъпна цветова система за проектиране на UI компоненти, които се вписват във вашата тема и марка. Той има автоматичен тъмен режим, приложен чрез име на клас и множество опции за комбиниране на цветове, които преминават контрастното съотношение на WCAG.

Икони Radix са набор от 15*15 икони, налични като отделни React компоненти. Тези икони също са налични като SVG файлове и можете също да ги отворите във Figma или Sketch.

Заедно примитивите, цветовете и иконите опростяват начина, по който изграждате предния край на вашето приложение.

Основни характеристики на потребителския интерфейс на Radix

  • Компонентите на Radix следват дизайнерските модели на WAI-ARIA.
  • Компонентите на Radix UI не са стилизирани, което ви дава свободата да ги персонализирате по ваш вкус.
  • Компонентите могат да бъдат контролирани или неконтролирани. По подразбиране те са неконтролирани, което ви позволява да ги използвате, без да е необходимо да управлявате локалното състояние.
  • Всеки примитив може да се инсталира индивидуално, което означава, че можете да инсталирате примитиви, както имате нужда от тях.
  • Компонентите споделят подобен API, който е напълно въведен.

Следвайте това урок по примитиви за да започнете да използвате Radix.

Material UI (MUI) е една от най-популярните библиотеки с компоненти на React с повече от 80 000 звезди в GitHub. По подразбиране MUI предлага компоненти, които следват стандартите за материален дизайн на Google. Можете обаче да персонализирате тези компоненти, за да отговарят на вашите дизайнерски нужди.

Освен компоненти, MUI предлага също шаблони и комплекти за дизайн. Шаблоните са предварително проектирани дизайни на потребителския интерфейс, които ви помагат бързо да изградите интерфейси. Комплектът за дизайн е колекция от дизайнерски елементи и стилове, целящи да помогнат на дизайнерите и разработчиците да постигнат последователен дизайн.

Версията на общността на MUI е безплатна, но има професионална и премиум версия с по-разширени функции.

Основни характеристики на Material UI

  • Компонентите са много адаптивни с възможности за тематизиране.
  • Компонентите са готови за производство.
  • Достъпността е основен приоритет за всички компоненти, които MUI доставя.
  • Има изчерпателна документация, която е лесна за навигация.
  • Има няколко Примери за използване на MUI на технологии като Remix, Next.js, Gatsby.js и много други, които демонстрират как да използвате MUI.
  • То поддържа TypeScript.
  • Той е много популярен и има голяма общност, която може да помогне с въпроси относно MUI.
  • Той предлага предварително изградени UI комплекти за компоненти за материален дизайн за Figma, Adobe XD, Sketch и UXPin.
  • MUI предоставя голям избор от икони.

Инсталирайте Material UI във вашия проект за да започнете да използвате MUI компоненти.

Headless UI е библиотека от нестилизирани и достъпни компоненти. Headless UI ви помага да изградите включващи компоненти, като управлявате атрибути и роли на ария, управление на фокуса, навигация с клавиатура и гарантирате, че поддържат екранни четци.

Тези компоненти работят добре с Попътен вятър CSS.

Основни характеристики на Headless UI

  1. Компонентите му не са стилизирани, което ви дава пълен контрол върху това как изглеждат.
  2. Headless UI компонентите са напълно достъпни, което ви помага да създавате всеобхватни приложения, без да харчите много време за изграждане и тестване на компоненти.
  3. Той предлага предварително стилизирани примери чрез Tailwind UI които можете да използвате във вашия проект.

Next UI е сравнително нова библиотека на React. Той е напълно съвместим с Next.js, което ви позволява създайте проект Next.js с минимална настройка.

Next UI все още е в бета версия, но има множество функции за изграждане на зашеметяващи и достъпни уебсайтове.

Основни характеристики на Next UI

  • Всички компоненти следват указанията на WAI-ARIA и поддържат навигация и фокусиране с клавиатура.
  • Предлага се с теми по подразбиране, които можете да персонализирате, за да отговарят на вашите нужди.
  • Можете също да внедрите тъмен режим само с няколко реда код.
  • Предоставя набор от CSS медийни заявки за изграждане на адаптивни оформления.
  • Той има напълно въведен API, който ви помага да създадете безопасно за тип приложение.
  • Next UI компонентите поддържат изобразяване от страна на сървъра.

Изберете вашата библиотека с внимание

Създаването на достъпни приложения може да отнеме много време; използването на UI библиотека е по-лесно. За проектите на React има няколко библиотеки, от които да избирате. Когато избирате библиотека, решете дали искате компонент без глава, който ще ви даде пълен контрол върху стила и функционалността, или предварително стилизирани компоненти с възможност за персонализиране.

Radix UI и Headless UI са страхотни, ако искате пълен контрол върху дизайна, докато Material UI и Next UI са добри опции, ако искате библиотека, готова за използване.