Home-theater-designers
React Aria Components és una biblioteca que conté una col·lecció de components sense estil construïts a sobre dels ganxos React Aria.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
Està desenvolupat per Adobe i forma part del projecte React Spectrum, que té com a objectiu crear una col·lecció completa de biblioteques i eines que ajudin els desenvolupadors a crear experiències d'usuari adaptatives, accessibles i robustes.
és segur per a targetes de crèdit
Comprensió dels components de React Aria
React Aria Components proporciona accessibilitat, interaccions dels usuaris i comportament segons les pràctiques recomanades de WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). A diferència de la biblioteca React Aria, que utilitza ganxos React per construir els seus components.
La biblioteca React Aria Components ofereix un conjunt de components preconstruïts, inclosos botons, caselles de verificació, control lliscant, etc. Aquests components no tenen estil, la qual cosa us permet dissenyar l'aspecte de l'aplicació com vulgueu.
Avantatges de l'ús de components React Aria
La biblioteca React Aria Components ofereix molts avantatges, com ara:
- Accessibilitat : els components de React Aria segueixen les millors pràctiques de WAI-ARIA, garantint que la vostra aplicació sigui accessible per a tots els usuaris, inclosos els que utilitzen tecnologies d'assistència.
- Flexibilitat : Els components de React Aria vénen sense estil, cosa que us permet implementar el vostre sistema de disseny sense restriccions.
- Interaccions d'usuari : React Aria ofereix un maneig sòlid de les interaccions de l'usuari, incloses les interaccions del teclat, el ratolí i el tacte.
- Internacionalització : React Aria admet idiomes de dreta a esquerra, format de data i nombre, i molt més, facilitant la creació d'aplicacions internacionalitzades.
Creació d'aplicacions React amb components React Aria
Anem a construir una aplicació React senzilla amb React Aria Components. Abans d'utilitzar la biblioteca React Aria Components a les vostres aplicacions React, heu de crear un projecte React. Vite és una bona manera de fer-ho .
Creació de la vostra aplicació React
Per crear la vostra aplicació React amb Vite, executeu el codi següent al vostre terminal:
npm init vite
Si executeu el codi anterior, s'obrirà una sèrie d'indicacions per ajudar-vos a crear el vostre nou projecte React.
Per exemple:
Després de crear el vostre projecte, haureu d'instal·lar les dependències necessàries. Per fer-ho, executeu el codi següent al vostre terminal:
cd react-aria-app
npm install
Canviarà el vostre directori actual al directori del projecte i després instal·larà les dependències necessàries. Un cop hàgiu creat la vostra aplicació React, podeu instal·lar la biblioteca React Aria Components per afegir funcions d'accessibilitat a la vostra aplicació.
Instal·lació de components de React Aria
Podeu instal·lar la biblioteca React Aria Components mitjançant npm o yarn. Per instal·lar-lo mitjançant npm, executeu l'ordre següent al vostre terminal:
npm install react-aria-components
Alternativament, per instal·lar-lo mitjançant fil, executeu aquest codi:
yarn add react-aria-components
Ara que heu instal·lat la biblioteca React Aria Components, podeu utilitzar els seus components a la vostra aplicació.
Ús dels components React Aria
La biblioteca React Aria Components ofereix una varietat de components que fan que el procés de desenvolupament sigui més fàcil i ràpid. Per utilitzar el component de la biblioteca, importeu-lo a la vostra aplicació i renderitzeu-lo.
Per exemple:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button>Click Me</Button>
<Popover>
<Dialog>You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
El bloc de codi anterior importa el fitxer Botó , Popover , DialogTrigger , i Diàleg components de la react-aria-components mòdul. Tots els components importats creen un botó senzill que mostra una finestra emergent quan es fa clic.
El DialogTrigger controla la visibilitat d'un diàleg o finestra emergent. Dins del DialogTrigger , hi ha el Botó component. Aquest botó activa la visibilitat del Popover i Diàleg .
El Popover component és un contenidor que apareix a la resta de la interfície d'usuari, mentre que el Diàleg El component mostra contingut en una capa per sobre de l'aplicació. Dins del Popover component és a Diàleg component amb el text 'Has fet clic al botó . '
Si feu clic al botó, es mostrarà una finestra emergent amb el text 'Has fet clic al botó' a la vostra pantalla, donant a la vostra interfície un aspecte similar a la imatge següent.
Com podeu veure a la imatge de dalt, els components de la biblioteca vénen sense estil perquè pugueu triar el vostre estil preferit.
Dissenyar els vostres components
Com que els components React Aria no tenen estil, podeu dissenyar-los com vulgueu. Pots fer servir Fulls d'estil en cascada (CSS) , Tailwind CSS, components d'estil o qualsevol altre mètode d'estil que preferiu.
Podeu passar diferents costums noms de classe als components i després definiu les classes CSS al vostre fitxer CSS.
com aconseguir wifi sense connexió a Internet
Aquí teniu un exemple:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button className="button">Click Me</Button>
<Popover className="popover">
<Dialog className="dialog">You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
En aquest exemple, definiu a className per al Botó , Popover , i Diàleg components. Ara podeu dissenyar els components del vostre fitxer CSS.
.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}
Després de definir els estils dels vostres components, el botó i la finestra emergent haurien de semblar així.
Si no voleu definir un costum className per als vostres components, la biblioteca React Aria Components inclou un valor predeterminat className per a cada component. El valor per defecte className és react-aria-componentName , on componentName és el nom del component que voleu estilitzar.
Per exemple:
.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}
Tingueu en compte que el bloc de codi CSS anterior aplicarà aquests estils a tots Botó , Popover , i Diàleg component que utilitzeu a la vostra aplicació.
Creeu aplicacions React accessibles i interactives
React Aria Components és una biblioteca potent per crear aplicacions React accessibles i interactives. Proporciona components que gestionen les interaccions dels usuaris i l'accessibilitat segons les millors pràctiques de WAI-ARIA. Si busqueu una biblioteca de components que ofereixi molts components i flexibilitat, React Aria Components és una opció excel·lent.
Al costat de la biblioteca de components React Aria, hi ha altres biblioteques de components sense estil que podeu utilitzar per crear aplicacions React boniques. Una d'aquestes biblioteques inclou la interfície d'usuari Radix. Radix UI és una biblioteca de components sense estil per crear aplicacions React d'alta qualitat. És una gran alternativa a React Aria Components.