Home-theater-designers
Puteți utiliza biblioteci de componente care oferă elemente pre-construite, cu stil pentru a simplifica procesul de dezvoltare pentru aplicațiile React. Aceste biblioteci pot economisi mult timp și efort, dar vă pot limita și controlul asupra stilului aplicației dvs. Dacă aveți nevoie de mai mult control asupra stilului aplicațiilor dvs. React, luați în considerare utilizarea unei biblioteci de componente fără stil.
Ce sunt bibliotecile de componente nestilizate?
Componentă nestilată bibliotecile sunt folosite pentru a dezvolta aplicații React accesibile . Sunt colecții de componente UI reutilizabile fără stiluri predefinite. Ele vă oferă structura de bază a elementelor UI fără nici un stil. Acest lucru vă oferă control complet asupra modului în care arată și simt componentele dvs.
Beneficiile bibliotecilor de componente nestilizate
Iată câteva dintre beneficiile utilizării bibliotecilor de componente fără stil:
- Control complet asupra stilului : Bibliotecile de componente fără stil vă oferă control total asupra modului în care arată componentele dvs. Puteți utiliza orice CSS sau cadru de stil pentru a personaliza componentele în funcție de nevoile dvs.
- Accelerează dezvoltarea : Bibliotecile de componente fără stil vă pot ajuta să accelerați dezvoltarea, oferind un set de componente predefinite pe care le puteți utiliza în aplicația dvs.
- Usor de intretinut : Bibliotecile de componente nestilizate sunt ușor de întreținut deoarece nu sunt strâns cuplate cu niciun cadru de stil specific. Aceasta înseamnă că puteți actualiza cu ușurință stilul fără a face modificări codului de bază.
1. Interfața de utilizare Radix
Radix UI este o bibliotecă de componente fără stil care se concentrează pe accesibilitate. Acesta oferă un set de componente UI concepute pentru a fi accesibile tuturor utilizatorilor. Puteți creați aplicații React frumoase folosind interfața de utilizare Radix .
Când lucrați cu Radix UI, puteți instala componentele individuale de care aveți nevoie în loc de întreaga bibliotecă. Acest lucru vă asigură că vă păstrați aplicația ușoară.
De exemplu, dacă aveți nevoie doar de o componentă de acordeon, o puteți instala în aplicația dvs. rulând următoarea comandă:
npm install @radix-ui/react-accordion
După instalarea componentei de acordeon, puteți crea acordeoane în aplicația React.
Iată un exemplu despre cum să utilizați componenta acordeonului:
import React from "react"
import * as Accordion from "@radix-ui/react-accordion"
export default function App() {
return (
<div>
<Accordion.Root type="single" defaultValue="item-1" collapsible>
<Accordion.Item value="item-1">
<Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger>
<Accordion.Content>Yes. It is unstyled.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
)
}
Blocul de cod de mai sus configurează o componentă de acordeon de bază fără stil folosind @radix-ui/react-accordion bibliotecă, permițând articole pliabile cu conținut personalizabil.
Codul va genera un acordeon care arată astfel:
2. Reacționează Aria
Biblioteca React Aria este un set de cârlige pentru construirea de interfețe cu utilizatorul în React. Biblioteca facilitează crearea de aplicații web accesibile, oferind o colecție de componente care urmează cele mai bune practici pentru accesibilitate.
Adobe a dezvoltat și întreține biblioteca React Aria. Biblioteca face parte din sistemul Adobe Spectrum Design mai extins, care oferă un set cuprinzător de ghiduri de proiectare și resurse pentru construirea de interfețe de utilizator accesibile. Elementele furnizate de biblioteca React Aria sunt nestilizate, permițându-vă să personalizați elementele pentru a se potrivi nevoilor dumneavoastră.
Pentru a utiliza React Aria în aplicația dvs. React, instalați-o rulând următoarea comandă:
npm install react-aria
Iată un exemplu despre cum să creați o componentă de buton utilizând useButton cârlig:
conectează-ți propriile puncte
import React from 'react'
import {useButton} from 'react-aria';
function Button(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
export default Button;
Acum puteți importa și reda fișierul buton componentă în orice altă componentă pe care o alegeți.
De exemplu:
import React from 'react'
import Button from './Button';
function App() {
return (
<Button>Click Me</Button>
);
}
export default App;
Când redați blocul de cod de mai sus, acesta va genera un buton simplu care arată astfel:
Dacă nu vă simțiți confortabil să utilizați React Aria din cauza cârligelor, utilizați React Aria Components bibliotecă în schimb. Această bibliotecă oferă componente prefabricate care sunt accesibile implicit. Este un strat subțire deasupra bibliotecii React Aria. Componentele furnizate sunt nestilizate, deci cele două biblioteci sunt foarte asemănătoare.
3. UI de bază
Base UI este o bibliotecă React UI fără stil care oferă componente UI fără stil. Echipa Material UI a creat Base UI cu un set de componente fundamentale pe care le puteți folosi pentru a vă crea propriile aplicații personalizate React. Ei au bazat biblioteca Base UI pe aceeași inginerie robustă ca material UI , dar Base UI nu implementează Material Design.
Puteți instala Base UI în aplicația dvs. React cu această comandă:
npm install @mui/base
Interfața de utilizare de bază oferă componente din mers, ceea ce înseamnă că puteți importa și utiliza direct componente din bibliotecă. De asemenea, oferă cârlige pe care le puteți folosi pentru a vă crea și configura componentele.
Iată un exemplu de utilizare a componentelor Base UI:
import React from "react";
import Button from "@mui/base/Button";
export default function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
Acest cod generează un buton simplu folosind Buton componentă a bibliotecii Base UI. De asemenea, puteți utiliza useButton cârlig pentru a îndeplini aceeași sarcină.
import React from "react";
import useButton from "@mui/base/useButton";
export default function App() {
const { getRootProps } = useButton();
return (
<div>
<button {...getRootProps()}>Click Me</button>
</div>
);
}
The useButton cârlig și Buton componenta va genera un buton fără stil, așa cum se arată în imaginea de mai jos.
cum să joci jocuri Windows pe Android
4. UI fără cap
O altă bibliotecă pe care o puteți explora este Headless UI, care oferă elemente de UI fără stil, oferindu-vă libertatea de a personaliza aspectul și comportamentul componentelor UI după cum credeți de cuviință.
Puteți instala biblioteca folosind următoarea comandă:
npm install @headlessui/react
După instalarea bibliotecii, puteți utiliza mai multe componente pe care biblioteca le oferă în aplicația dvs. React.
De exemplu:
import React from "react";
import { Popover } from "@headlessui/react";
export default function App() {
return (
<div>
<Popover>
<Popover.Button>Popover</Popover.Button>
<Popover.Panel>
<p>This is a Popover</p>
</Popover.Panel>
</Popover>
</div>
);
}
În acest exemplu, creați un popover folosind Popover componentă din biblioteca Headless UI. Blocul de cod de mai sus va genera un popover care arată astfel.
Obțineți control complet cu componente fără stil
Bibliotecile de componente fără stil vă oferă control complet asupra stilului aplicației dvs. React, permițându-vă să creați experiențe unice pentru utilizator. Aceste biblioteci oferă o gamă largă de opțiuni pentru a se potrivi nevoilor dumneavoastră. Puteți crea aplicații React atrăgătoare din punct de vedere vizual și extrem de personalizabile, utilizând bibliotecile menționate mai sus.