Home-theater-designers
Du kan bruge komponentbiblioteker, der leverer forudbyggede, stilede elementer til at forenkle udviklingsprocessen for React-apps. Disse biblioteker kan spare en masse tid og kræfter, men de kan også begrænse din kontrol over stilen af din app. Hvis du har brug for mere kontrol over din React-apps styling, kan du overveje at bruge et ustylet komponentbibliotek.
Hvad er ustylede komponentbiblioteker?
Ustylet komponent biblioteker bruges til at udvikle tilgængelige React-applikationer . De er samlinger af genbrugelige UI-komponenter uden foruddefinerede stilarter. De giver dig den grundlæggende struktur af UI-elementer uden nogen form for styling. Dette giver dig fuld kontrol over, hvordan dine komponenter ser ud og føles.
Fordele ved ustylede komponentbiblioteker
Her er nogle af fordelene ved at bruge ustylede komponentbiblioteker:
- Fuld kontrol over styling : Ustylede komponentbiblioteker giver dig fuld kontrol over, hvordan dine komponenter ser ud. Du kan bruge enhver CSS eller stylingramme til at tilpasse komponenterne, så de matcher dine behov.
- Fremskynde udviklingen : Ustylede komponentbiblioteker kan hjælpe dig med at fremskynde udviklingen ved at levere et sæt forudbyggede komponenter, du kan bruge i din app.
- Nem at vedligeholde : Ustylede komponentbiblioteker er nemme at vedligeholde, fordi de ikke er tæt koblet til nogen specifik stylingramme. Det betyder, at du nemt kan opdatere stylingen uden at lave ændringer i den underliggende kode.
1. Radix UI
Radix UI er et ustylet komponentbibliotek, der fokuserer på tilgængelighed. Det giver et sæt UI-komponenter designet til at være tilgængelige for alle brugere. Du kan byg smukke React-apps ved hjælp af Radix UI .
Når du arbejder med Radix UI, kan du installere de enkelte komponenter, du har brug for, i stedet for hele biblioteket. Dette sikrer, at du holder din applikation let.
For eksempel, hvis du kun har brug for en harmonika-komponent, kan du installere den i din applikation ved at køre følgende kommando:
npm install @radix-ui/react-accordion
Efter installation af harmonika-komponenten kan du oprette harmonikaer i din React-app.
Her er et eksempel på, hvordan du bruger harmonika-komponenten:
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>
)
}
Kodeblokken ovenfor opsætter en grundlæggende ustylet harmonikakomponent ved hjælp af @radix-ui/react-accordion bibliotek, der giver mulighed for sammenklappelige elementer med tilpasseligt indhold.
Koden vil generere en harmonika, der ser sådan ud:
to computere to skærme et tastatur en mus
2. Reager Aria
React Aria-biblioteket er et sæt kroge til at bygge brugergrænseflader i React. Biblioteket gør det lettere at skabe tilgængelige webapplikationer ved at levere en samling af komponenter, der følger bedste praksis for tilgængelighed.
Adobe udviklede og vedligeholder React Aria-biblioteket. Biblioteket er en del af det mere omfattende Adobe Spectrum Design System, som giver et omfattende sæt designretningslinjer og ressourcer til opbygning af tilgængelige brugergrænseflader. Elementerne leveret af React Aria-biblioteket er ustylede, hvilket giver dig mulighed for at tilpasse elementerne, så de passer til dine behov.
For at bruge React Aria i din React-applikation skal du installere den ved at køre følgende kommando:
npm install react-aria
Her er et eksempel på, hvordan man opretter en knapkomponent ved hjælp af brug knappen krog:
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;
Nu kan du importere og gengive knap komponent i enhver anden komponent, du vælger.
For eksempel:
import React from 'react'
import Button from './Button';
function App() {
return (
<Button>Click Me</Button>
);
}
export default App;
Når du gengiver kodeblokken ovenfor, vil den generere en simpel knap, der ser sådan ud:
Hvis du er utilpas med at bruge React Aria på grund af krogene, så brug Reager Aria-komponenter bibliotek i stedet for. Dette bibliotek giver forudbyggede komponenter, der er tilgængelige som standard. Det er et tyndt lag oven på React Aria-biblioteket. De medfølgende komponenter er ustylede, så de to biblioteker ligner hinanden meget.
3. Base UI
Base UI er et ustylet React UI-bibliotek, der giver UI-komponenter uden styling. Materiale UI-teamet skabte Base UI med et sæt grundlæggende komponenter, du kan bruge til at bygge dine egne tilpassede React-apps. De baserede Base UI-biblioteket på det samme robust konstruktion som Material UI , men Base UI implementerer ikke Material Design.
Du kan installere Base UI i din React-applikation med denne kommando:
npm install @mui/base
Base UI giver komponenter på farten, hvilket betyder, at du direkte kan importere og bruge komponenter fra biblioteket. Det giver også kroge, som du kan bruge til at oprette og konfigurere dine komponenter.
Her er et eksempel på brug af Base UI-komponenter:
import React from "react";
import Button from "@mui/base/Button";
export default function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
Denne kode genererer en simpel knap ved hjælp af Knap komponent i Base UI-biblioteket. Du kan også bruge brug knappen krog for at udføre den samme opgave.
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>
);
}
Det brug knappen krog og Knap komponent vil generere en knap, som ikke er stilet, som vist på billedet nedenfor.
4. Hovedløs UI
Et andet bibliotek, du kan udforske, er Headless UI, som tilbyder ustylede UI-elementer, hvilket giver dig frihed til at tilpasse udseendet og adfærden af dine UI-komponenter, som du finder passende.
Du kan installere biblioteket ved at bruge følgende kommando:
npm install @headlessui/react
Når du har installeret biblioteket, kan du bruge de flere komponenter, som biblioteket leverer i din React-applikation.
For eksempel:
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>
);
}
I dette eksempel opretter du en popover ved hjælp af Popover komponent fra Headless UI-biblioteket. Kodeblokken ovenfor vil generere en popover, der ser sådan ud.
Få fuldstændig kontrol med ustylede komponenter
Ustylede komponentbiblioteker giver dig fuld kontrol over stylingen af din React-applikation, så du kan skabe unikke brugeroplevelser. Disse biblioteker tilbyder en række muligheder, der passer til dine behov. Du kan skabe visuelt tiltalende og meget tilpasselige React-applikationer ved at udnytte de ovenfor nævnte biblioteker.