# Segment Evergreen Designsystem

## Segment Evergreen Designsystem-Oberflächenvorschau

Kombinieren Sie einen Plan mit den erforderlichen Tags, prüfen Sie passende Datensätze, reagieren Sie auf fehlende Treffer und sehen Sie sich einen lokalen Snapshot an.

## Segment Evergreen Designsystem-Designreferenz

Native Evergreen-7.1.9-React-Komponenten und defaultTheme; eigene lokale Regeln für Zielgruppen.

### Eckenradien

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| radii.0 | 0px | Radiuswerte aus dem Theme verwenden; wählen Sie eine Rolle, statt jede verschachtelte Box schrittweise stärker abzurunden. |
| radii.1 | 4px | Radiuswerte aus dem Theme verwenden; wählen Sie eine Rolle, statt jede verschachtelte Box schrittweise stärker abzurunden. |
| radii.2 | 8px | Radiuswerte aus dem Theme verwenden; wählen Sie eine Rolle, statt jede verschachtelte Box schrittweise stärker abzurunden. |
### Schriftgrößen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| fontSizes.0 | 10px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.1 | 12px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.2 | 14px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.3 | 16px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.4 | 18px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.5 | 20px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.6 | 24px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
| fontSizes.7 | 32px | Indexierte Schriftgrößenwerte im veröffentlichten Standard-Theme. |
### Zeilenhöhen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| lineHeights.0 | 16px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.1 | 18px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.2 | 20px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.3 | 24px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.4 | 28px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.5 | 32px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
| lineHeights.6 | 40px | Auf die vorgesehene Textrolle abstimmen, statt für jeden Absatz den Zeilenrhythmus einer Überschrift zu übernehmen. |
### Schriftstärken

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| fontWeights.light | 300 | Evergreen verwendet in diesem Theme 500 für semibold und 600 für bold; ersetzen Sie diese Werte nicht stillschweigend durch die Standard-Schlüsselwörter des Browsers. |
| fontWeights.normal | 400 | Evergreen verwendet in diesem Theme 500 für semibold und 600 für bold; ersetzen Sie diese Werte nicht stillschweigend durch die Standard-Schlüsselwörter des Browsers. |
| fontWeights.semibold | 500 | Evergreen verwendet in diesem Theme 500 für semibold und 600 für bold; ersetzen Sie diese Werte nicht stillschweigend durch die Standard-Schlüsselwörter des Browsers. |
| fontWeights.bold | 600 | Evergreen verwendet in diesem Theme 500 für semibold und 600 für bold; ersetzen Sie diese Werte nicht stillschweigend durch die Standard-Schlüsselwörter des Browsers. |
### Referenzen auf die Standardfarbpalette

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| colors.gray900 | #101840 | Primäre dunkle Textfarbe. |
| colors.gray700 | #696f8c | Unterstützender Text. |
| colors.gray400 | #d8dae5 | Definierte Begrenzung. |
| colors.gray200 | #edeff5 | Dezente Trennlinie. |
| colors.gray100 | #F4F5F9 | Zurückhaltender Hintergrund. |
| colors.blue500 | #3366FF | Referenz für primäres Blau. |
| colors.blue600 | #2952CC | Referenz für stärkere blaue Interaktionen. |
| colors.red500 | #D14343 | Referenz für kritische Fehler. |
| colors.green500 | #52BD95 | Erfolgsreferenz. |
### Layout-Funktionen und API für kontrollierte Eingaben

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| majorScale(3) | 24px | Acht-Pixel-Hauptskala für Abstände zwischen Abschnitten. |
| minorScale(3) | 12px | Vier-Pixel-Nebenskala für kleinere Abstände. |
| TagInput.values | controlled array | Die Anwendung verwaltet die akzeptierten Tags. |
| TagInput.onChange | new array; return false to retain input | Validiere neue Tags, bevor du sie akzeptierst. |
| TagInput.separator | comma and new line by default | Ermöglicht mehrere Tags ohne eigenen Parser. |
## Segment Evergreen Designsystem – vollständiger Leitfaden

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.

## Segment Evergreen Designsystem – Struktur des Zielgruppen-Builders

### Platziere Regeln neben ihren Auswirkungen

> Das Beispiel kombiniert ein Regelpanel mit passenden fiktiven Datensätzen. Die Planauswahl und die erforderlichen Tags sind gleichzeitig mit der Ergebnisanzahl sichtbar. So lässt sich nachvollziehen, wie sich eine Regeländerung auswirkt. Nutzer müssen weder speichern noch einen Dialog öffnen, um herauszufinden, ob die aktuelle Kombination passende Einträge ergibt.

### Verwende einen begrenzten, transparenten Beispieldatensatz

Fünf benannte Beispieldatensätze zeigen ihren Tarif und ihre Tags. Die Seite gibt nicht vor, ein Kunden-Data-Warehouse abzufragen oder eine echte Zielgruppengröße zu schätzen. Ein Ergebnis von null ist ein sinnvoller Teil des Beispiels – mit einer Aktion, die das vollständige Beispieldatenset wiederherstellt.

## Segment Evergreen Designsystem-Theme-Werte und Semantik

### Das tatsächliche Standard-Theme auslesen

Evergreen 7.1.9 stellt indizierte Radien, Schriftgrößen und Zeilenhöhen sowie benannte Farben und Komponentenstile bereit. Die Tabelle übernimmt diese exportierten Werte unverändert. Besonders lesenswert sind die Bezeichnungen der Schriftstärken: semibold und bold entsprechen den Werten 500 und 600 und weichen damit von verbreiteten Annahmen ab.

### Die benutzerdefinierte Komposition auf das Theme abstimmen

ThemeProvider stellt die nativen Eingabefelder, Tags, Badges, Buttons und den Dialog bereit. Die selbst gestalteten Panels verwenden dieselbe zurückhaltende Kombination aus kühlem Grau und Blau. Das Beispiel überschreibt die Interna nativer Komponenten nicht mit weit gefassten CSS-Selektoren, sodass die bereitgestellten Interaktionsstile erhalten bleiben.

## Segment Evergreen Designsystem-Typografie für die Regelbearbeitung

### Die Aufgabe klar hierarchisieren

Überschriftenebenen unterscheiden den Titel der Zielgruppe von Panelüberschriften und den Namen einzelner Ergebnisse. Ergänzende Texte erklären die Eingabe von Tags und den Umfang der fiktiven Daten. Ein Zähler-Badge steht neben der Ergebnisüberschrift, statt sie zu ersetzen. So kann die Person den Bereich identifizieren, bevor sie die Zahl einordnet.

### Metadaten gut lesbar halten

Tarif- und Tag-Informationen stützen die Erläuterung der Zuordnung und sind nicht bloß dekorativ. Das Layout lässt Tags umbrechen und ordnet bei schmalen Smartphone-Bildschirmen Text und Badges eines Datensatzes untereinander an. Werden alle Labels auf winzigen Text reduziert, gehen die Informationen verloren, die zum Verständnis der Regeln nötig sind.

## Segment Evergreen Designsystem-Haupt- und Nebenskalen

### Funktionen für wiederholbare Abstände verwenden

majorScale und minorScale stehen für Schritte von acht beziehungsweise vier Pixeln. Das Komponentenbeispiel verwendet majorScale(3) für einen Abstand von 24px zwischen den Panelüberschriften; das benutzerdefinierte Stylesheet übernimmt das responsive Layout. Diese Unterscheidung sollte klar bleiben: Ein Grid-Breakpoint ist eine Entscheidung der Anwendung und kein Ergebnis einer Abstands-Funktion.

### Feldbeziehungen auf Mobilgeräten erhalten

Am ursprünglichen Breakpoint der Anwendung wechselt das Regel-Panel über die Ergebnisse. Labels, Hinweise und Steuerelemente bleiben zusammen, und das Tag-Eingabefeld nutzt die gesamte verfügbare Breite. Der native Umbruch der Tags verhindert, dass eine lange Werteliste ein horizontal scrollbares Formular erzeugt.

## Segment Evergreen Designsystem: Kontrollierte Tags und Zuordnung

### Werte vor dem Übernehmen normalisieren

Der onChange-Handler entfernt führende und nachfolgende Leerzeichen, wandelt Zeichenfolgen in Kleinbuchstaben um, entfernt Duplikate und weist mehr als vier unterschiedliche Tags zurück. Die Rückgabe von false lässt das Eingabefeld unverändert, wenn ein Eintrag abgelehnt wird. Diese Richtlinie gehört zur Zielgruppenanwendung; TagInput stellt die kontrollierte Interaktion bereit, legt aber keine geschäftliche Obergrenze fest.

### Die Zuordnung zu allen Tags bewusst einsetzen

Ein Datensatz muss dem ausgewählten Tarif und jedem erforderlichen Tag entsprechen. Werden alle Tags entfernt, entfällt diese Einschränkung; mit „Beliebig“ entfällt die Tarifbeschränkung. Die aktuelle Ergebnisanzahl wird aus demselben gefilterten Array berechnet, das auf dem Bildschirm dargestellt wird. So stimmt die Zahl mit den sichtbaren Karten überein.

## Segment Evergreen Designsystem: Prüfungsdialog und lokaler Snapshot

### Die aktuellen Regeln vor dem Speichern prüfen

Vor dem Öffnen des Dialogs muss ein Zielgruppenname eingegeben werden. Der Dialog zeigt den Namen, die Anzahl, den Tarif und die Tags erneut an und bietet anschließend die Aktion „Lokal speichern“. Dieser zusätzliche Schritt zeigt ein natives Overlay für einen konkreten Snapshot – statt einer leeren Bestätigung, die nur „Sind Sie sicher?“ fragt.

### Den bisherigen Erfolg bei Regeländerungen verwerfen

Wird der Name, der Tarif oder ein Tag geändert, wird der Hinweis auf den gespeicherten Snapshot gelöscht. Ein früherer lokaler Erfolg kann daher nicht mit einer Bestätigung der neu bearbeiteten Regeln verwechselt werden. Die Anwendung bezeichnet den Snapshot weder als Segment-Zielgruppe noch sendet sie eine Anfrage an eine Kundenplattform.

## Segment Evergreen Designsystem: Tastatureingabe und Wiederherstellung des Dialogs

### Tags, Ergebnisse und Prüfung als einen Ablauf testen

Tags lassen sich mit den dokumentierten Eingabetasten hinzufügen. Über seine ID erhält das Eingabefeld ein sichtbares Label. Wird die Tag-Obergrenze überschritten, erscheint eine native Gefahrenmeldung. Für die Prüfung wird das native Fokusverhalten von Dialog verwendet, statt ein eigenes Overlay mit nicht verwaltetem Fokus zu erstellen.

1. Newsletter zu den anfänglich aktiven Tags hinzufügen und die Anzahl vergleichen.

2. Ein Tag ohne Treffer hinzufügen und anschließend die Regeln löschen, um alle fünf Datensätze wiederherzustellen.

3. Prüfen und lokal speichern, dann eine Regel ändern und sicherstellen, dass der vorherige Erfolgshinweis verschwindet.

### Die Wiederherstellung nach leeren Ergebnissen in der aktuellen Aufgabe ermöglichen

Mit „Regeln löschen“ werden sowohl Tarif- als auch Tag-Einschränkungen entfernt und ein veralteter Speicherstatus ausgeblendet. Anschließend enthält der Ergebnisbereich wieder alle fünf Datensätze. Die Bearbeitung kann sofort fortgesetzt werden; eine versteckte Navigation oder ein Neuladen der Seite ist nicht erforderlich.

## Segment Evergreen Designsystem-Integration von React

### Ein vollständiges, kontrolliertes Beispiel verwenden

Der native Einstiegspunkt importiert ThemeProvider, defaultTheme und die dargestellten Komponenten. Der Status umfasst Regeln, Fehler, die Sichtbarkeit des Dialogs und den lokal gespeicherten Snapshot. Das vollständige JSX und CSS unten enthalten den fiktiven Datensatz; dadurch ist die Ergebnisberechnung ohne externes API reproduzierbar.

- ThemeProvider verwendet das angeheftete defaultTheme.

- Die Werte von TagInput werden von der Anwendung kontrolliert.

- Dialog prüft dieselben Regeln, die auch für die Ergebnisliste gelten.

### Den Datenzugriff als separate Anwendungsschicht ergänzen

Ein echtes Zielgruppen-Tool würde einen authentifizierten Datenzugriff, eine festgelegte Zuordnungsabfrage, einen Ladezustand und ein servergestütztes Speichern erfordern. Die Vorschau von Regeln und das dauerhafte Speichern einer Zielgruppe müssen klar getrennt bleiben. Beim Anschluss an einen echten Datensatz darf die Anzahl aus dem Beispieldatensatz mit fünf Einträgen nicht beibehalten werden.

## Segment Evergreen Designsystem-Komponentenbeispiele

### main.jsx — vollständiges, funktionsfähiges Beispiel

Eine lokale Zielgruppe erstellen und prüfen. Der folgende Quelltext ist der vollständige Einstiegspunkt für React und enthält den gesamten Status sowie die Validierung.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  ThemeProvider,
  defaultTheme,
  Heading,
  Text,
  Paragraph,
  Button,
  TagInput,
  TextInputField,
  SelectField,
  Alert,
  Dialog,
  Badge,
  majorScale,
} from "evergreen-ui";
import "./evergreen.css";
const people = [
  { name: "Avery Stone", plan: "Pro", tags: ["active", "newsletter"] },
  { name: "Taylor Reed", plan: "Free", tags: ["newsletter"] },
  { name: "Jordan Park", plan: "Pro", tags: ["active"] },
  { name: "Morgan Lee", plan: "Team", tags: ["active", "newsletter"] },
  { name: "Casey Chen", plan: "Free", tags: ["trial"] },
];
function App() {
  const [tags, setTags] = useState(["active"]),
    [plan, setPlan] = useState("Any"),
    [name, setName] = useState("Active customers"),
    [error, setError] = useState(""),
    [open, setOpen] = useState(false),
    [saved, setSaved] = useState(null);
  const matches = people.filter(
    (p) =>
      (plan === "Any" || p.plan === plan) &&
      tags.every((t) => p.tags.includes(t)),
  );
  function changeTags(values) {
    const unique = [
      ...new Set(values.map((v) => v.trim().toLowerCase()).filter(Boolean)),
    ];
    if (unique.length > 4) {
      setError("Use at most four tags.");
      return false;
    }
    setTags(unique);
    setError("");
    setSaved(null);
  }
  return (
    <ThemeProvider value={defaultTheme}>
      <main className="audience">
        <header>
          <Text size={300}>WORKSPACE / AUDIENCES</Text>
          <Heading size={700} marginTop={8}>
            Build a focused audience
          </Heading>
          <Paragraph marginTop={8}>
            Combine a plan and tags against five fictional records. No customer
            data is loaded.
          </Paragraph>
        </header>
        <div className="audience-grid">
          <section className="rule-panel">
            <Heading size={500} marginBottom={majorScale(3)}>
              Audience rules
            </Heading>
            <TextInputField
              label="Audience name"
              value={name}
              onChange={(e) => {
                setName(e.target.value);
                setSaved(null);
              }}
            />
            <SelectField
              label="Plan"
              value={plan}
              onChange={(e) => {
                setPlan(e.target.value);
                setSaved(null);
              }}
            >
              <option>Any</option>
              <option>Free</option>
              <option>Pro</option>
              <option>Team</option>
            </SelectField>
            <label htmlFor="audience-tags">Required tags</label>
            <Paragraph size={300} marginBottom={8}>
              Press Enter or comma to add a tag. Every tag must match.
            </Paragraph>
            <TagInput
              values={tags}
              onChange={changeTags}
              width="100%"
              inputProps={{ id: "audience-tags", placeholder: "Add tag…" }}
            />
            <Paragraph size={300} marginTop={8}>
              Available sample tags: active, newsletter, trial.
            </Paragraph>
            {error && <Alert intent="danger" title={error} marginTop={16} />}
            <Button
              appearance="primary"
              marginTop={24}
              onClick={() => {
                if (!name.trim()) {
                  setError("Name the audience before reviewing.");
                  return;
                }
                setError("");
                setOpen(true);
              }}
            >
              Review audience
            </Button>
          </section>
          <section className="results-panel">
            <div className="results-title">
              <Heading size={500}>Matching sample records</Heading>
              <Badge color="blue">
                {matches.length} of {people.length}
              </Badge>
            </div>
            {matches.length ? (
              <div className="record-list">
                {matches.map((p) => (
                  <article key={p.name}>
                    <div>
                      <Heading size={400}>{p.name}</Heading>
                      <Text size={300}>{p.plan} plan</Text>
                    </div>
                    <div className="tag-list">
                      {p.tags.map((t) => (
                        <Badge key={t} color="neutral">
                          {t}
                        </Badge>
                      ))}
                    </div>
                  </article>
                ))}
              </div>
            ) : (
              <div className="empty">
                <Heading size={500}>No matching sample records</Heading>
                <Paragraph marginTop={8}>
                  Remove a tag or change the plan to broaden the selection.
                </Paragraph>
                <Button
                  marginTop={16}
                  onClick={() => {
                    setTags([]);
                    setPlan("Any");
                    setSaved(null);
                  }}
                >
                  Clear rules
                </Button>
              </div>
            )}
            {saved && (
              <Alert
                intent="success"
                title="Local audience saved"
                marginTop={20}
              >
                {saved.name} · {saved.count} sample records. Nothing was sent to
                Segment.
              </Alert>
            )}
          </section>
        </div>
        <Dialog
          isShown={open}
          title="Review local audience"
          onCloseComplete={() => setOpen(false)}
          confirmLabel="Save locally"
          onConfirm={() => {
            setSaved({ name: name.trim(), count: matches.length });
            setOpen(false);
          }}
          width={560}
        >
          <Paragraph>
            <strong>{name}</strong> matches {matches.length} of {people.length}{" "}
            fictional records.
          </Paragraph>
          <Paragraph marginTop={12}>
            Plan: {plan}. Required tags: {tags.join(", ") || "none"}.
          </Paragraph>
          <Paragraph marginTop={12}>
            This saves only a local snapshot; it does not create a Segment
            audience.
          </Paragraph>
        </Dialog>
        <footer>
          Native Evergreen 7.1.9 React components. Original audience logic; no
          analytics or customer service connection.
        </footer>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Code-Referenz

- Erstellen Sie ein Vite-Projekt React, behalten Sie <div id="root"></div> bei und laden Sie diese Datei als src/main.jsx.

### evergreen.css — ursprüngliches responsives Layout

Anwendungslayout, das um die nativen Komponenten herum aufgebaut ist.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f4f5f9;
  color: #101840;
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.audience {
  padding: 32px;
}
.audience header {
  max-width: 800px;
  margin-bottom: 28px;
}
.audience-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.5fr);
  gap: 24px;
}
.rule-panel,
.results-panel {
  padding: 24px;
  background: white;
  border: 1px solid #d8dae5;
  border-radius: 8px;
  min-width: 0;
}
.rule-panel > label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.results-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.record-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #edeff5;
}
.record-list article:first-child {
  padding-top: 0;
}
.record-list article:last-child {
  border: 0;
}
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.empty {
  padding: 36px 12px;
  text-align: center;
  background: #f4f5f9;
  border-radius: 4px;
}
.audience footer {
  margin-top: 24px;
  font-size: 12px;
  color: #696f8c;
}
.audience input {
  max-width: 100%;
}
[role="dialog"] {
  max-width: calc(100vw - 32px);
}
@media (max-width: 850px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .audience {
    padding: 16px;
  }
  .rule-panel,
  .results-panel {
    padding: 20px;
  }
  .record-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .results-title {
    align-items: flex-start;
  }
}
```

Code-Referenz

- Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.

## Segment Evergreen Einrichtung des Designsystem-KI-Agenten

### Ausgangspunkt für die Implementierung

Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.

```
npm create vite@latest evergreen-audience -- --template react
cd evergreen-audience
npm install
npm install react@18.3.1 react-dom@18.3.1 evergreen-ui@7.1.9
# Replace src/main.jsx and add src/evergreen.css.
npm run dev
```

### Ein Prompt für dein Projekt

```
Einen Evergreen-Zielgruppen-Editor mit dem tatsächlichen Theme und dem kontrollierten TagInput erstellen. Tags normalisieren und Duplikate entfernen, die Zuordnung zu allen Tags eindeutig festlegen, für übereinstimmende Ergebnisse und Zähler sorgen, die Regeln in einem nativen Dialog prüfen und veraltete Erfolgshinweise bei Regeländerungen löschen. Keine Verbindung zu einem Segment-Dienst behaupten.
```

## Segment Evergreen-Designsystem: Quellen und Geltungsbereich

OpenDesign-Anwendungsleitfaden für Evergreen 7.1.9. Fünf fiktive Datensätze veranschaulichen die lokale Filterung und die Prüfung von Momentaufnahmen. Es sind keine Kundendaten oder Zielgruppen von Segment API angebunden.

- Evergreen-Tageingabe Gesteuerte Werte, Trennzeichen und Verhalten bei Zurückweisungen.

- Evergreen-Dialog Natives Fokus-, Bestätigungs- und Schließverhalten.

- Fixierte Theme-Quelle Veröffentlichte Standard-Theme-Zusammenstellung.

## Segment Evergreen-Designsystem: Verwandte Ressourcen

### Semi Design

Erstellen Sie eine schrittweise Workspace-Einrichtung mit den empfohlenen grundlegenden Steps von Semi, einem gesteuerten Input und Switch, echten Theme-Tokens und einer expliziten Entscheidung zwischen den Paketen React 18 und React 19.

### Semrush Intergalactic

Eine Intergalactic-Anleitung mit aktuellen semantischen und Diagramm-Design-Tokens, nativen Filtersteuerelementen, Vergleichen mit fester Skalierung, ausgewählten Details und einer vollständigen, reproduzierbaren Beispieldatengrundlage.

### ServiceNow Horizon

Erkunden Sie die genauen Referenzwerte für Abstände, Radien und Typografie im Horizon Workspace anhand eines vollständigen lokalen Ablaufs zur Prüfung von Anfragen – mit Speicherung von Entwürfen, Validierung, Statusfiltern und Wiederherstellung.


- [Implementierungsreferenz](https://evergreen.segment.com/components/tag-input)
- [Quelle](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)
- [Quelle](https://evergreen.segment.com/components/tag-input)
- [Code-Referenz](https://evergreen.segment.com/components/tag-input)
- [Evergreen-Tageingabe Gesteuerte Werte, Trennzeichen und Verhalten bei Zurückweisungen.](https://evergreen.segment.com/components/tag-input)
- [Evergreen-Dialog Natives Fokus-, Bestätigungs- und Schließverhalten.](https://evergreen.segment.com/components/dialog)
- [Fixierte Theme-Quelle Veröffentlichte Standard-Theme-Zusammenstellung.](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)