Home-theater-designers
Sie können Komponentenbibliotheken verwenden, die vorgefertigte, gestaltete Elemente bereitstellen, um den Entwicklungsprozess für React-Apps zu vereinfachen. Diese Bibliotheken können viel Zeit und Mühe sparen, aber sie können auch Ihre Kontrolle über das Design Ihrer App einschränken. Wenn Sie mehr Kontrolle über das Design Ihrer React-Apps benötigen, sollten Sie die Verwendung einer nicht formatierten Komponentenbibliothek in Betracht ziehen.
Was sind nicht gestaltete Komponentenbibliotheken?
Nicht gestylte Komponente Bibliotheken werden verwendet, um barrierefreie React-Anwendungen zu entwickeln . Es handelt sich um Sammlungen wiederverwendbarer UI-Komponenten ohne vordefinierte Stile. Sie stellen Ihnen die Grundstruktur von UI-Elementen ohne jegliches Styling zur Verfügung. Dadurch haben Sie die vollständige Kontrolle darüber, wie Ihre Komponenten aussehen und sich anfühlen.
Filme kostenlos ohne WLAN herunterladen
Vorteile von nicht gestalteten Komponentenbibliotheken
Hier sind einige der Vorteile der Verwendung von nicht formatierten Komponentenbibliotheken:
- Vollständige Kontrolle über das Styling : Unformatierte Komponentenbibliotheken geben Ihnen die volle Kontrolle darüber, wie Ihre Komponenten aussehen. Sie können jedes CSS- oder Styling-Framework verwenden, um die Komponenten an Ihre Bedürfnisse anzupassen.
- Beschleunigen Sie die Entwicklung : Unformatierte Komponentenbibliotheken können Ihnen dabei helfen, die Entwicklung zu beschleunigen, indem sie eine Reihe vorgefertigter Komponenten bereitstellen, die Sie in Ihrer App verwenden können.
- Leicht zu pflegen : Nicht gestylte Komponentenbibliotheken sind einfach zu verwalten, da sie nicht eng an ein bestimmtes Stil-Framework gebunden sind. Dies bedeutet, dass Sie den Stil problemlos aktualisieren können, ohne Änderungen am zugrunde liegenden Code vorzunehmen.
1. Radix-Benutzeroberfläche
Radix UI ist eine unformatierte Komponentenbibliothek, die sich auf Barrierefreiheit konzentriert. Es bietet eine Reihe von UI-Komponenten, die für alle Benutzer zugänglich sind. Du kannst Erstellen Sie wunderschöne React-Apps mit der Radix-Benutzeroberfläche .
Wenn Sie mit der Radix-Benutzeroberfläche arbeiten, können Sie statt der gesamten Bibliothek die einzelnen benötigten Komponenten installieren. Dadurch wird sichergestellt, dass Ihre Anwendung leichtgewichtig bleibt.
Wenn Sie beispielsweise nur eine Accordion-Komponente benötigen, können Sie diese in Ihrer Anwendung installieren, indem Sie den folgenden Befehl ausführen:
npm install @radix-ui/react-accordion
Nach der Installation der Akkordeon-Komponente können Sie Akkordeons in Ihrer React-App erstellen.
Hier ist ein Beispiel für die Verwendung der Akkordeon-Komponente:
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>
)
}
Der obige Codeblock richtet mithilfe von eine grundlegende, nicht gestaltete Akkordeonkomponente ein @radix-ui/react-accordion Bibliothek, die zusammenklappbare Elemente mit anpassbarem Inhalt ermöglicht.
Der Code generiert ein Akkordeon, das so aussieht:
2. Arie reagieren
Die React Aria-Bibliothek ist eine Reihe von Hooks zum Erstellen von Benutzeroberflächen in React. Die Bibliothek erleichtert die Erstellung barrierefreier Webanwendungen, indem sie eine Sammlung von Komponenten bereitstellt, die den Best Practices für Barrierefreiheit folgen.
Adobe hat die React Aria-Bibliothek entwickelt und verwaltet sie. Die Bibliothek ist Teil des umfangreicheren Adobe Spectrum Design System, das umfassende Designrichtlinien und Ressourcen für die Erstellung barrierefreier Benutzeroberflächen bereitstellt. Die von der React Aria-Bibliothek bereitgestellten Elemente sind nicht gestylt, sodass Sie die Elemente an Ihre Bedürfnisse anpassen können.
Um React Aria in Ihrer React-Anwendung zu verwenden, installieren Sie es, indem Sie den folgenden Befehl ausführen:
npm install react-aria
Hier ist ein Beispiel für die Erstellung einer Schaltflächenkomponente mithilfe von useButton Haken:
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;
Jetzt können Sie das importieren und rendern Taste Komponente in eine beliebige andere Komponente Ihrer Wahl.
wie installiere ich windows 10 auf einem usb
Zum Beispiel:
import React from 'react'
import Button from './Button';
function App() {
return (
<Button>Click Me</Button>
);
}
export default App;
Wenn Sie den obigen Codeblock rendern, wird eine einfache Schaltfläche generiert, die so aussieht:
Wenn Ihnen die Verwendung von React Aria aufgrund der Haken unangenehm ist, verwenden Sie die React Aria-Komponenten stattdessen die Bibliothek. Diese Bibliothek stellt vorgefertigte Komponenten bereit, auf die standardmäßig zugegriffen werden kann. Es ist eine dünne Schicht über der React Aria-Bibliothek. Die bereitgestellten Komponenten sind unformatiert, sodass die beiden Bibliotheken sehr ähnlich sind.
3. Basis-Benutzeroberfläche
Base UI ist eine unformatierte React-UI-Bibliothek, die UI-Komponenten ohne Formatierung bereitstellt. Das Material UI-Team hat die Basis-UI mit einer Reihe grundlegender Komponenten erstellt, mit denen Sie Ihre eigenen benutzerdefinierten React-Apps erstellen können. Sie basierten darauf auch auf der Basis-UI-Bibliothek Robustes Engineering als Material UI , aber Base UI implementiert kein Material Design.
Mit diesem Befehl können Sie Base UI in Ihrer React-Anwendung installieren:
npm install @mui/base
Base UI stellt Komponenten für unterwegs bereit, sodass Sie Komponenten direkt aus der Bibliothek importieren und verwenden können. Es stellt außerdem Hooks bereit, die Sie zum Erstellen und Konfigurieren Ihrer Komponenten verwenden können.
Hier ist ein Beispiel für die Verwendung von Basis-UI-Komponenten:
import React from "react";
import Button from "@mui/base/Button";
export default function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
Dieser Code generiert eine einfache Schaltfläche mithilfe von Taste Komponente der Base UI-Bibliothek. Sie können auch die verwenden useButton Hook, um die gleiche Aufgabe auszuführen.
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>
);
}
Der useButton Haken und die Taste Die Komponente generiert eine nicht gestaltete Schaltfläche, wie im Bild unten gezeigt.
4. Headless-Benutzeroberfläche
Eine weitere Bibliothek, die Sie erkunden können, ist Headless UI, die nicht gestaltete UI-Elemente bietet und Ihnen die Freiheit gibt, das Erscheinungsbild und Verhalten Ihrer UI-Komponenten nach Ihren Wünschen anzupassen.
Kann Windows Mac OS Extended lesen?
Sie können die Bibliothek mit dem folgenden Befehl installieren:
npm install @headlessui/react
Nach der Installation der Bibliothek können Sie die verschiedenen Komponenten, die die Bibliothek bereitstellt, in Ihrer React-Anwendung verwenden.
Zum Beispiel:
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>
);
}
In diesem Beispiel erstellen Sie ein Popover mit Popover Komponente aus der Headless UI-Bibliothek. Der obige Codeblock generiert ein Popover, das so aussieht.
Erhalten Sie die vollständige Kontrolle mit ungestylten Komponenten
Unformatierte Komponentenbibliotheken geben Ihnen die vollständige Kontrolle über das Design Ihrer React-Anwendung und ermöglichen Ihnen die Schaffung einzigartiger Benutzererlebnisse. Diese Bibliotheken bieten eine Reihe von Optionen, die Ihren Anforderungen entsprechen. Sie können optisch ansprechende und hochgradig anpassbare React-Anwendungen erstellen, indem Sie die oben genannten Bibliotheken nutzen.