# Red Hat PatternFly-Designsystem

## Red Hat PatternFly-Designsystem: Oberflächenvorschau

Durchsuchen Sie die Servicegalerie, wählen Sie einzelne oder alle sichtbaren Services aus, prüfen Sie die Replikat-Gesamtzahl, kontrollieren Sie die Auswahl und bestätigen Sie einen lokalen Plan.

## Red Hat PatternFly-Designsystem: Designreferenz

PatternFly React 6.6.1 und @patternfly/react-tokens 6.6.1. Ausgewählte aufgelöste Tokenwerte des veröffentlichten hellen Themes sind unten dargestellt. Native Komponenten und pf-v6-theme-dark sorgen für die Darstellung im dunklen Theme; Beispieldaten der Services und Layout sind anwendungsspezifische Festlegungen.

### Semantische Rollen für Oberflächen und Text

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--text--color--regular | #151515 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--text--color--subtle | #383838 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--text--color--disabled | #a3a3a3 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--color--brand--default | #004d99 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--color--brand--hover | #003366 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--color--brand--accent--default | #ee0000 | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
| --pf-t--global--color--brand--subtle--default | #e0f0ff | Verwenden Sie die semantische Rolle des aktiven Themes; das rote Markenakzent ist nicht die universelle Farbe für primäre Aktionen. |
### Statusrollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --pf-t--global--color--status--success--default | #204d00 | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
| --pf-t--global--color--status--warning--default | #73480b | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
| --pf-t--global--color--status--danger--default | #731f00 | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
| --pf-t--global--color--status--info--default | #3d2785 | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
| --pf-t--global--color--status--custom--default | #004d4d | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
| --pf-t--global--color--status--unread--default | #0066cc | Kombinieren Sie die Statusabsicht mit einer Beschriftung in Textform. Diese Werte für das helle Design ersetzen nicht die nativen Varianten von Label oder Alert. |
### Text- und Überschriften-Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --pf-t--global--font--size--body--default | 0.875rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--body--lg | 1rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h1 | 1.5rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h2 | 1.25rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h3 | 1.125rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h4 | 1rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h5 | 1rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
| --pf-t--global--font--size--heading--h6 | 1rem | Legen Sie die Typografierolle und die semantische Überschriftenebene bewusst fest. Die visuelle Größe bestimmt nicht die Gliederung des Dokuments. |
### Abstandsskala

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --pf-t--global--spacer--xs | 0.25rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--sm | 0.5rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--md | 1rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--lg | 1.5rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--xl | 2rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--2xl | 3rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--3xl | 4rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
| --pf-t--global--spacer--4xl | 5rem | Verwenden Sie für Gruppen und Steuerelemente die benannte Abstandsskala. Rem-Werte richten sich nach der Schriftgröße des Benutzerstammelements. |
### Form und Fokus

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --pf-t--global--border--radius--tiny | 4px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--small | 6px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--medium | 16px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--large | 24px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--pill | 999px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--control--form-element | 6px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
| --pf-t--global--border--radius--action--default | 999px | Verwenden Sie die passende Komponentenform, statt jeder Oberfläche einen pillenförmigen Radius zu geben. |
## Red Hat PatternFly Vollständiger Leitfaden zum Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Red Hat PatternFly Betriebliches Layout des Designsystems

### Eine Sammlung mit dauerhaft sichtbarem Betriebskontext

> In der Dienstübersicht kann ein Operator Zustand, Standort und Auslastung vergleichen, während ein separater Auswahlbereich die gewählte Dienstemenge festhält. Die Auswahl entspricht nicht den aktuellen Suchergebnissen. Ein herausgefilterter Dienst bleibt ausgewählt, bis er bewusst entfernt wird. Diese Unterscheidung ist entscheidend bei einer Sammelaktion, deren Auswirkungen über den sichtbaren Bildschirm hinausgehen.

### Verwenden Sie die native Komponenten-Hierarchie

Gallery verwaltet responsive Spalten für Karten, Card trennt die einzelnen Dienste, Label kennzeichnet den Status und Progress zeigt einen Beispielprozentsatz samt Titel an. Die Seite ahmt keine Infrastrukturkonsole mit beliebigen farbigen Rechtecken nach. Datenmodell, Steuerelemente und Prüfstatus sind im vollständigen Beispiel React implementiert.

## Red Hat PatternFly Semantische Farb- und Theme-Rollen des Designsystems

### Primäre Markenfarbe und roter Akzent sind voneinander getrennt

PatternFly v6 stellt separate Rollen für Marke, Akzent, Text, Hintergrund und Status bereit. Der ausgewählte Snapshot des hellen Designs enthält die Standardwerte für Markenblau und Markenakzentrot. Würde jede hervorgehobene Aktion in Red-Hat-Rot dargestellt, gingen diese Rollen ineinander über. Native Button- und Label-Komponenten verwenden die Systemrollen, die zu ihrer jeweiligen Variante passen.

### Legen Sie das dunkle Theme auf Dokumentebene fest

Das Beispiel aktiviert pf-v6-theme-dark am Dokumentelement. Anwendungsoberflächen und Text verwenden semantische Variablen aus --pf-t--global, sodass auch deren Farben durch das Theme festgelegt werden. Fixieren Sie keine Werte des hellen Designs in benutzerdefinierten Karten und erwarten Sie dann, dass eine Theme-Klasse am Dokument diese korrigiert.

## Red Hat PatternFly Typografie und Dienstmetadaten des Designsystems

### Visuelle Größe und semantische Überschriftenebene getrennt festlegen

Title mit headingLevel h1 legt die Seitenüberschrift fest, während die Größe ihre visuelle Hervorhebung steuert. In diesem Paket-Snapshot beträgt body-default 0.875rem. Kartenbeschriftungen, Status und Auslastungswerte bleiben gut lesbar, ohne jeden Wert zu einer Überschrift zu machen. Die Definitionsliste der Metadaten weist Replikatanzahlen und Dienst-IDs eindeutig aus.

### Mehrdeutige betriebliche Beschriftungen vermeiden

Die Beispielauslastung ist sowohl in der Komponente als auch in der Fußzeile als Beispieldatum gekennzeichnet. Ein unbeschrifteter Fortschrittsbalken könnte mit einer Bereitstellungsaufgabe oder einem Ladevorgang verwechselt werden. Die Beschriftung erklärt, wofür der Prozentsatz steht; das Status-Label gibt unabhängig davon an, ob die Kapazität gesund oder zu prüfen ist.

## Red Hat PatternFly Galerie und Sammelauswahl des Designsystems

### Die drei Kontrollkästchenzustände verwenden

Das Steuerelement „Sichtbare auswählen“ hat den Wert true, wenn alle sichtbaren Dienste ausgewählt sind, false, wenn keiner ausgewählt ist, und null, wenn nur einige ausgewählt sind. PatternFly Checkbox unterstützt den Wert null für den unbestimmten Zustand. Die Anwendung berechnet diesen Zustand anhand der gefilterten Sammlung und verwendet keinen separaten booleschen Wert, der von den Zeilenauswahlen abweichen könnte.

1. Wählen Sie einen Dienst aus und prüfen Sie den Zustand einer Teilauswahl.

2. Wählen Sie alle derzeit sichtbaren Dienste aus.

3. Suchen Sie nach einem Namen und prüfen Sie, ob die ausgeblendeten Auswahlen erhalten bleiben.

4. Prüfen Sie die genaue Auswahl und die Gesamtzahl der Replikate.

5. Bestätigen Sie den lokalen Plan und lesen Sie das Ergebnis.

### Die Auswahlmenge als maßgebliche Datenquelle verwenden

Jeder Dienst hat eine stabile ID. Einzelne Kontrollkästchen und „Sichtbare auswählen“ aktualisieren dieselbe ID-Menge; der Auswahlbereich leitet daraus Dienstnamen und Gesamtzahl der Replikate ab. Die Suche ändert nur die Sichtbarkeit. So bleibt die Prüfzusammenfassung konsistent, auch wenn der Operator die Galerie nach der Auswahl mehrerer Dienste weiter einschränkt.

## Red Hat PatternFly Abstände und responsive Karten des Designsystems

### Semantische Tokens für den Seitenrahmen verwenden

Der Hintergrund des Beispiels, der normale Text und dezente Metadaten verwenden semantische Eigenschaften aus dem veröffentlichten Token-Paket CSS. Die native Abstandsskala reicht von xs bis 4xl; zwischen Sammlung und Auswahlbereich verwendet die Anwendung einen Abstand von 24px. Dieser explizite Wert für die Gestaltung ist unabhängig von der Token-Referenz.

### Die Galerie neu umbrechen lassen, bevor ihr Inhalt verkleinert wird

Gallery erhält eine minimale Elementbreite von 230px und einen Abstand. Beim Anwendungs-Breakpoint von 850px wird der Auswahlbereich unter die Sammlung verschoben. Bei 500px beträgt der Seitenabstand 16px und die Suche nimmt die gesamte Breite der Symbolleiste ein. Dies sind Layoutentscheidungen für das Beispiel und keine Behauptung, dass alle PatternFly-Produkte dieselben Breakpoints verwenden.

## Red Hat PatternFly Prüf- und Auswahlzustände des Designsystems

### Durch die Auswahl darf der Vorgang nicht sofort ausgeführt werden

Durch Aktivieren des Kontrollkästchens wird ein Dienst lediglich in die Auswahl aufgenommen. „Auswahl prüfen“ zeigt einen informativen Alert und eine Bestätigungsaktion an. „Lokalen Plan bestätigen“ meldet die Gesamtzahl der ausgewählten Dienste und Replikate, ohne einen Wartungsauftrag zu starten. Bei einer Änderung der Auswahl wird der Prüfstatus geschlossen, damit nicht versehentlich eine veraltete Auswahl bestätigt wird.

### Die Wiederherstellung der Suche von der Auswahl getrennt halten

Bei einer Suche ohne Treffer wird ein Inline-Hinweis mit „Suche löschen“ angezeigt. Dadurch wird nur die Suchanfrage gelöscht; ausgewählte Dienste bleiben erhalten. Die Anzahl der ausgewählten Elemente in der Symbolleiste und der Auswahlbereich zeigen daher weiterhin denselben Stand. Die Auswahl als Nebeneffekt einer leeren Suche zurückzusetzen, wäre ein verstecktes destruktives Verhalten.

## Red Hat PatternFly Barrierefreie Steuerelemente und Status des Designsystems

### Auswahl beschriften und native Steuerelemente verwenden

Jedes Checkbox hat eine stabile ID und eine sichtbare Beschriftung mit dem Dienstnamen. SearchInput hat einen barrierefreien Namen, Switch benennt die Einstellung für das Erscheinungsbild und „Auswahl prüfen“ ist deaktiviert, solange die Auswahl leer ist. Native Progress vermittelt seinen Wert und Titel. Die Seite ist nicht von einer nur beim Überfahren mit dem Mauszeiger sichtbaren Aktion abhängig, die in einer Karte verborgen ist.

### Zustände in Worten sichtbar machen

Die Anzahl der ausgewählten Elemente wird über eine höfliche Live-Region ausgegeben, der Dienststatus steht in einem Label und der abschließende Alert beschreibt, was geschehen ist. Verwenden Sie Farbe nicht als einziges Merkmal für den ausgewählten Umfang oder den Zustand. Bei Tastaturtests sollten eine teilweise Auswahl, das Herausfiltern eines ausgewählten Dienstes und die Rückkehr zur vollständigen Sammlung abgedeckt werden.

- Ein ausgewähltes Kontrollkästchen steht für eine Einbeziehungsentscheidung, nicht für einen Erfolgsstatus.

- Ein Status-Label beschreibt den Dienst, nicht dessen Auswahl.

- Der Fortschritt beschreibt die Auslastung des Beispiels, nicht den Abschluss eines Vorgangs.

## Integration des Red Hat PatternFly-Designsystems mit React

### Reset- und Komponentenstile einmalig importieren

Das Beispiel importiert @patternfly/react-core/dist/styles/base.css am Einstiegspunkt. Native React-Komponenten beziehen ihre Komponentenstile aus dem Paket. Das Anwendungs-CSS ist auf pf-example beschränkt und verweist auf den aktuellen --pf-t--global-Namespace; interne Komponentenstile werden nicht überschrieben.

### Echte Planungsfunktionen nur hinter einem Servicevertrag ergänzen

Der lokale Plan ist bewusst nur eine Vorschau. Eine Produktionsimplementierung benötigt Autorisierung, Wartungsfenster, betroffene Abhängigkeiten, ausstehendes Feedback und serverseitige Validierung. Behalten Sie die ausgewählten IDs während der gesamten Anfrage unverändert bei und gleichen Sie das bestätigte Ergebnis mit der tatsächlichen Serviceantwort ab. Native Darstellungskomponenten stellen kein operatives Backend bereit.

## Red Hat PatternFly-Designsystem-Komponentenbeispiele

### main.jsx — Servicegalerie und Sammelprüfung

Vollständige native Zusammensetzung aus Gallery/Card/Checkbox/Progress mit abgeleitetem Auswahlumfang und lokaler Bestätigung.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Alert,
  Button,
  Card,
  CardBody,
  CardTitle,
  Checkbox,
  Gallery,
  GalleryItem,
  Label,
  Progress,
  SearchInput,
  Switch,
  Title,
} from "@patternfly/react-core";
import "@patternfly/react-core/dist/styles/base.css";
import "./patternfly.css";
const services = [
  {
    id: "api",
    name: "Public API",
    region: "eu-west",
    replicas: 6,
    load: 62,
    status: "Healthy",
  },
  {
    id: "jobs",
    name: "Background jobs",
    region: "eu-west",
    replicas: 3,
    load: 81,
    status: "Review capacity",
  },
  {
    id: "search",
    name: "Search index",
    region: "us-east",
    replicas: 4,
    load: 44,
    status: "Healthy",
  },
  {
    id: "events",
    name: "Event stream",
    region: "us-east",
    replicas: 8,
    load: 72,
    status: "Healthy",
  },
];
function App() {
  const [query, setQuery] = useState(""),
    [selected, setSelected] = useState([]),
    [review, setReview] = useState(false),
    [notice, setNotice] = useState(""),
    [dark, setDark] = useState(false);
  const visible = services.filter((x) =>
    x.name.toLowerCase().includes(query.toLowerCase()),
  );
  const picked = services.filter((x) => selected.includes(x.id));
  const allVisible =
    visible.length > 0 && visible.every((x) => selected.includes(x.id));
  const someVisible = visible.some((x) => selected.includes(x.id));
  function choose(id, checked) {
    setSelected((v) =>
      checked ? [...new Set([...v, id])] : v.filter((x) => x !== id),
    );
    setReview(false);
  }
  function selectVisible(checked) {
    setSelected((v) =>
      checked
        ? [...new Set([...v, ...visible.map((x) => x.id)])]
        : v.filter((id) => !visible.some((x) => x.id === id)),
    );
    setReview(false);
  }
  return (
    <main className="pf-example">
      <header>
        <div>
          <span className="overline">PATTERNFLY · SERVICE OPERATIONS</span>
          <Title headingLevel="h1" size="2xl">
            Plan a maintenance review
          </Title>
          <p>
            Select services and inspect the combined scope before creating a
            local plan.
          </p>
        </div>
        <Switch
          id="dark-theme"
          label="Dark theme"
          isChecked={dark}
          onChange={(_, checked) => {
            setDark(checked);
            document.documentElement.classList.toggle(
              "pf-v6-theme-dark",
              checked,
            );
          }}
        />
      </header>
      <div className="service-toolbar">
        <SearchInput
          aria-label="Find a service"
          placeholder="Find a service"
          value={query}
          onChange={(_, value) => setQuery(value)}
          onClear={() => setQuery("")}
        />
        <Checkbox
          id="select-visible"
          label="Select visible"
          isChecked={allVisible ? true : someVisible ? null : false}
          isDisabled={!visible.length}
          onChange={(_, checked) => selectVisible(checked)}
        />
        <span aria-live="polite">{selected.length} selected</span>
        <Button isDisabled={!selected.length} onClick={() => setReview(true)}>
          Review selection
        </Button>
      </div>
      <div className="service-layout">
        <Gallery hasGutter minWidths={{ default: "230px" }}>
          {visible.map((s) => (
            <GalleryItem key={s.id}>
              <Card>
                <CardTitle>
                  <Checkbox
                    id={"select-" + s.id}
                    label={s.name}
                    isChecked={selected.includes(s.id)}
                    onChange={(_, checked) => choose(s.id, checked)}
                  />
                </CardTitle>
                <CardBody>
                  <div className="service-meta">
                    <Label color={s.status === "Healthy" ? "green" : "orange"}>
                      {s.status}
                    </Label>
                    <span>{s.region}</span>
                  </div>
                  <Progress
                    value={s.load}
                    title="Sample utilization"
                    measureLocation="outside"
                  />
                  <dl>
                    <dt>Replicas</dt>
                    <dd>{s.replicas}</dd>
                    <dt>Service ID</dt>
                    <dd>
                      <code>{s.id}</code>
                    </dd>
                  </dl>
                </CardBody>
              </Card>
            </GalleryItem>
          ))}
        </Gallery>
        <aside>
          <Card>
            <CardTitle>Maintenance scope</CardTitle>
            <CardBody>
              <p>
                {picked.length} services ·{" "}
                {picked.reduce((n, s) => n + s.replicas, 0)} replicas
              </p>
              {picked.length ? (
                <ul>
                  {picked.map((s) => (
                    <li key={s.id}>
                      {s.name}
                      <span>{s.region}</span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="muted">Select a service to inspect its scope.</p>
              )}
              {review && (
                <div className="review">
                  <Alert
                    isInline
                    variant="info"
                    title="Review the selected services"
                  >
                    This is a fictional plan. No workload will be restarted.
                  </Alert>
                  <Button
                    onClick={() => {
                      setNotice(
                        `Local plan includes ${picked.length} services and ${picked.reduce((n, s) => n + s.replicas, 0)} replicas. No operation was scheduled.`,
                      );
                      setReview(false);
                    }}
                  >
                    Confirm local plan
                  </Button>
                </div>
              )}
            </CardBody>
          </Card>
        </aside>
      </div>
      {!visible.length && (
        <Alert isInline variant="info" title="No services match">
          <Button variant="link" onClick={() => setQuery("")}>
            Clear search
          </Button>
        </Alert>
      )}
      {notice && (
        <Alert isInline variant="success" title="Local plan recorded">
          {notice}
        </Alert>
      )}
      <footer>
        Native PatternFly 6.6.1 · service data and capacity figures are
        fictional, memory-only examples.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Code-Referenz

- Als src/main.jsx speichern. Checkbox onChange erhält das Ereignis und den Prüfwert; isChecked kann für eine gemischte Auswahl null sein.

### patternfly.css — responsives Operationslayout

Das benutzerdefinierte Seitenlayout nutzt semantische v6-Token und lässt die nativen Komponentenstile unverändert.

```
body {
  margin: 0;
}
.pf-example {
  padding: 24px;
  background: var(--pf-t--global--background--color--secondary--default);
  color: var(--pf-t--global--text--color--regular);
  font-family: var(--pf-t--global--font--family--body);
}
.pf-example header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.overline {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--pf-t--global--text--color--subtle);
}
.pf-example header h1 {
  margin: 8px 0;
}
.service-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.service-toolbar > .pf-v6-c-search-input {
  width: 280px;
}
.service-toolbar > span {
  margin-left: auto;
}
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 24px;
}
.service-layout dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
}
.service-layout dd {
  margin: 0;
}
.service-layout ul {
  padding: 0;
  list-style: none;
  margin: 16px 0;
}
.service-layout li {
  padding: 12px 0;
  border-bottom: 1px solid var(--pf-t--global--border--color--default);
}
.service-layout li span {
  display: block;
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
}
.muted {
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 16px;
}
.review > .pf-v6-c-button {
  margin-top: 16px;
}
.pf-example > .pf-v6-c-alert {
  margin-top: 24px;
}
.pf-example footer {
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 24px;
}
@media (max-width: 850px) {
  .service-layout {
    grid-template-columns: 1fr;
  }
  .pf-example header {
    align-items: start;
  }
  .service-toolbar > span {
    margin-left: 0;
  }
}
@media (max-width: 500px) {
  .pf-example {
    padding: 16px;
  }
  .pf-example header {
    flex-direction: column;
  }
  .service-toolbar {
    gap: 16px;
  }
  .service-toolbar > .pf-v6-c-search-input {
    width: 100%;
  }
}
```

Code-Referenz

- Als src/patternfly.css speichern. Die Breakpoints der Anwendung sind ausdrücklich Teil dieses Beispiels.

## Red Hat PatternFly-Designsystem-Agenteneinrichtung

### Ausgangspunkt für die Implementierung

Native Zusammensetzung mit React 18.3.1 / PatternFly 6.6.1. Vite erfordert eine unterstützte Node.js-Version. Die tatsächlichen Servicedaten und -vorgänge API bleiben in der Verantwortung der Anwendung.

```
npm create vite@latest patternfly-services -- --template react
cd patternfly-services
npm install
npm install react@18.3.1 react-dom@18.3.1 @patternfly/react-core@6.6.1
# Replace src/main.jsx and add src/patternfly.css using the complete examples.
npm run dev
```

### Ein Prompt für dein Projekt

```
Erstellen Sie eine Operationssammlung mit den nativen Gallery-, Card-, Checkbox-, Progress-, Label- und Alert-Komponenten von PatternFly 6.6.1. Verwenden Sie die bereitgestellten semantischen Token und das vollständige Beispiel. Trennen Sie die Sichtbarkeit gefilterter Einträge von den ausgewählten IDs, berechnen Sie die teilweise Sammelauswahl und verlangen Sie eine Prüfung der exakt betroffenen Elemente. Ergänzen Sie bei einer echten Integration von API aussagekräftige Rückmeldungen zu ausstehenden, fehlgeschlagenen und erfolgreichen Vorgängen. Erhalten Sie das responsive Layout auf Mobilgeräten und die Tastaturbedienbarkeit.
```

## Red Hat PatternFly-Designsystem: Quellen und Geltungsbereich

Ein von OpenDesign verfasster Anwendungsleitfaden mit einem fiktiven Beispiel zur Wartungsplanung, umgesetzt mit nativen Komponenten von PatternFly React 6.6.1. Auslastung, Region und Replikatanzahl sind Beispieldaten. Die Bestätigung aktualisiert nur den lokalen Zustand; kein Dienst wird neu gestartet oder eingeplant.

- Mit PatternFly entwickeln Integration des nativen Pakets und Stylesheets.

- Veröffentlichte Token-Module Versionierte Tokennamen und aufgelöste helle Werte.

- Muster für Sammelauswahl Auswahlumfang und Verhalten der Sammlung.

- PatternFly-React-Repository Implementierung nativer Komponenten und Lizenz.

## Weiterführende Ressourcen zum Red Hat PatternFly-Designsystem

### REI Cedar

Erstelle einen konkreten Auswahlbereich für Cedar-Lieferoptionen mit nativen Vue-Kacheln, echten Token-Werten, vollständiger Tastaturnavigation und einem responsiven Produktlayout.

### Sainsbury's Designsystem

Setzen Sie Sainsburys öffentliche Designrichtlinien für einen vollständigen Ablauf zur Auswahl eines Lieferzeitfensters um: mit echten Farb- und Größenreferenzen, barrierefreien Radio-Optionen, einer aktualisierten Zusammenfassung und einer transparenten lokalen Rückmeldung.

### Salesforce Lightning

Ein Lightning-Blueprint-Leitfaden für die Bearbeitung umfangreicher Datensätze: realistische Abstände, Typografie und semantische Farben, ein bearbeitbarer Fallarbeitsbereich, Feldvalidierung und ein Aktivitätsverlauf, der lokale Änderungen widerspiegelt.


- [Implementierungsreferenz](https://www.patternfly.org/patterns/bulk-selection/)
- [Quelle](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [Code-Referenz](https://www.patternfly.org/components/checkbox/)
- [Code-Referenz](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/)
- [Mit PatternFly entwickeln Integration des nativen Pakets und Stylesheets.](https://www.patternfly.org/get-started/develop/)
- [Veröffentlichte Token-Module Versionierte Tokennamen und aufgelöste helle Werte.](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [Muster für Sammelauswahl Auswahlumfang und Verhalten der Sammlung.](https://www.patternfly.org/patterns/bulk-selection/)
- [PatternFly-React-Repository Implementierung nativer Komponenten und Lizenz.](https://github.com/patternfly/patternfly-react)