Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Přístupnost by měla být jednou z vašich hlavních priorit během vývoje. Přístupné komponenty zlepšují použitelnost aplikace a rozšiřují její publikum. Vytváření přístupných aplikací však může být nákladné z hlediska doby sestavení a testování.

Chcete-li ušetřit čas, můžete použít knihovnu komponent uživatelského rozhraní, která poskytuje přístupné komponenty, které byly důkladně testovány. Příklady dostupných knihoven komponent uživatelského rozhraní jsou Chakra UI, Radix UI, Material UI, Headless UI a Next UI.

Chakra UI je jednoduchá knihovna komponent, která je skvělá pro vytváření aplikací, které jsou přístupné. S 1,4 miliony stažení za měsíc tato knihovna uživatelského rozhraní rychle roste a určitě najdete odpovědi, když ji budete používat. Je skládací a poskytuje komponenty, které jsou malé s minimální složitostí. Tento přístup zvyšuje jeho možnosti přizpůsobení, protože vývojáři mohou kombinovat tyto malé komponenty a vytvářet větší.

instagram viewer

Chakra UI má bezplatnou verzi a placené verze. Bezplatná verze je však pro malé projekty dostačující.

Klíčové vlastnosti uživatelského rozhraní Chakra

  • Komponenty uživatelského rozhraní Chakra splňují standardy WAI-ARIA a všechny jsou přístupné.
  • Komponenty jsou přizpůsobitelné a můžete je změnit tak, aby odpovídaly vašim požadavkům na design.
  • Komponenty jsou skládací. Můžete je snadno kombinovat a vytvářet tak větší komponenty.
  • Knihovna Chakra UI je typově bezpečná, protože je napsána v TypeScriptu.
  • Má velkou podporu komunity a rozsáhlou dokumentaci.
  • Nabízí světlé a tmavé uživatelské rozhraní, které eliminuje složitost implementace tmavého režimu ve vaší aplikaci React.
  • Podporuje mobilní design a každá komponenta je responzivní.

Následuj Průvodce instalací uživatelského rozhraní Chakra začít používat Chakra UI ve svém projektu.

Radix UI je open-source knihovna pro vytváření přístupných webových aplikací a návrhových systémů. Radix nabízí primitiva, ikony a barvy.

Radix primitiva jsou nestylizované, přístupné komponenty. Primitives urychlují vývoj tím, že se starají o složité části, jako je soulad s WAI-ARIA, navigace pomocí klávesnice a správa zaměření. Protože se dodávají bez stylu, můžete svůj design realizovat pomocí stylingového řešení dle vašeho výběru.

Barvy Radix poskytují přístupný systém barev pro navrhování komponent uživatelského rozhraní, které zapadají do vašeho tématu a značky. Má automatický tmavý režim aplikovaný prostřednictvím názvu třídy a více možností barevných kombinací, které splňují kontrastní poměr WCAG.

Radixové ikony jsou sada 15*15 ikon dostupných jako jednotlivé komponenty Reactu. Tyto ikony jsou k dispozici také jako soubory SVG a můžete je také otevřít v programu Figma nebo Sketch.

Primitiva, barvy a ikony společně zjednodušují způsob, jakým vytváříte přední část vaší aplikace.

Klíčové vlastnosti Radix UI

  • Komponenty Radix se řídí designovými vzory WAI-ARIA.
  • Komponenty uživatelského rozhraní Radix jsou bez stylu, což vám dává svobodu přizpůsobit si je podle svých představ.
  • Komponenty mohou být řízené nebo neřízené. Ve výchozím nastavení jsou nekontrolované, což vám umožňuje používat je, aniž byste museli spravovat místní stav.
  • Každé primitivum lze nainstalovat samostatně, což znamená, že si můžete nainstalovat primitiva, jak potřebujete.
  • Komponenty sdílejí podobné API, které je plně napsané.

Postupujte podle tohoto primitivní tutoriál začít používat Radix.

Material UI (MUI) je jednou z nejoblíbenějších knihoven komponent React s více než 80 000 hvězdičkami na GitHubu. Ve výchozím nastavení MUI nabízí komponenty, které splňují standardy materiálového designu společnosti Google. Tyto komponenty si však můžete přizpůsobit tak, aby vyhovovaly vašim konstrukčním potřebám.

Kromě komponent nabízí MUI také šablony a designové sady. Šablony jsou předem navržené návrhy uživatelského rozhraní, které vám pomohou rychle vytvořit rozhraní frontend. Design kit je kolekce designových prvků a stylů, jejichž cílem je pomoci návrhářům a vývojářům dosáhnout konzistentního designu.

Komunitní verze MUI je zdarma, ale existuje profesionální a prémiová verze s pokročilejšími funkcemi.

Klíčové vlastnosti Material UI

  • Komponenty jsou vysoce přizpůsobitelné díky možnostem motivování.
  • Komponenty jsou připraveny k výrobě.
  • Přístupnost je hlavní prioritou pro všechny součásti dodávané MUI.
  • Má obsáhlou dokumentaci, ve které se snadno orientuje.
  • Má několik Příklady použití MUI technologií jako Remix, Next.js, Gatsby.js a mnoha dalších, které demonstrují, jak používat MUI.
  • To podporuje TypeScript.
  • Je velmi populární a má velkou komunitu, která může pomoci s dotazy ohledně MUI.
  • Nabízí předpřipravené sady uživatelského rozhraní pro komponenty materiálového designu pro Figma, Adobe XD, Sketch a UXPin.
  • MUI poskytuje velký výběr ikon.

Nainstalujte Material UI do svého projektu začít používat komponenty MUI.

Headless UI je knihovna nestylovaných a přístupných komponent. Bezhlavé uživatelské rozhraní vám pomáhá budovat inkluzivní komponenty zpracováním atributů a rolí árií, správou fokusu, navigací pomocí klávesnice a zajištěním podpory čtečky obrazovky.

S těmito komponenty se dobře pracuje Tailwind CSS.

Klíčové vlastnosti bezhlavého uživatelského rozhraní

  1. Jeho součásti nejsou stylizované, takže máte naprostou kontrolu nad tím, jak vypadají.
  2. Bezhlavé komponenty uživatelského rozhraní jsou plně přístupné, což vám pomůže vytvářet komplexní aplikace, aniž byste museli trávit spoustu času vytvářením a testováním komponent.
  3. Nabízí předem stylizované příklady prostřednictvím Uživatelské rozhraní Tailwind které můžete použít ve svém projektu.

Next UI je relativně nová knihovna React. Je plně kompatibilní s Next.js, což vám umožňuje vytvořit projekt Next.js s minimálním nastavením.

Další uživatelské rozhraní je stále ve verzi beta, ale má řadu funkcí pro vytváření úžasných a přístupných webových stránek.

Klíčové vlastnosti dalšího uživatelského rozhraní

  • Všechny komponenty se řídí pokyny WAI-ARIA a podporují navigaci a ostření pomocí klávesnice.
  • Dodává se s výchozími motivy, které si můžete přizpůsobit podle svých potřeb.
  • Můžete také implementovat tmavý režim pomocí několika řádků kódu.
  • Poskytuje sadu Dotazy na média CSS pro rozvržení reagující na budovy.
  • Má plně typizované API, které vám pomůže vytvořit typově bezpečnou aplikaci.
  • Další komponenty uživatelského rozhraní podporují vykreslování na straně serveru.

Vybírejte svou knihovnu pečlivě

Vytváření přístupných aplikací může být časově náročné; použití knihovny uživatelského rozhraní je jednodušší. Pro projekty React je na výběr několik knihoven. Při výběru knihovny se rozhodněte, zda chcete komponentu bez hlavy, která vám poskytne úplnou kontrolu nad stylem a funkčností, nebo předem vytvořené, přizpůsobitelné komponenty.

Radix UI a Headless UI jsou skvělé, pokud chcete plnou kontrolu nad designem, zatímco Material UI a Next UI jsou dobré možnosti, pokud chcete knihovnu připravenou k použití.