# gluestack UI-Designsystem

## gluestack UI-Designsystem: Oberflächenvorschau

Füge ein eindeutiges Element hinzu, markiere es als eingepackt und prüfe den daraus abgeleiteten Fortschritt.

## gluestack UI-Designsystem: Designreferenz

Die Referenz trennt dokumentierte helle Farben aus Version 5 von API der installierten Core-Creators. Direkte Creators wenden das CLI-Theme nicht automatisch an. Die Vorschau ordnet die aufgeführten Farben ausdrücklich eigenen Stilen zu und verwendet eine deutlichere benutzerdefinierte Fokusumrandung. Geometrie und Illustrationen sind Entscheidungen der Anwendung.

### Dokumentierte helle Farbfunktionen aus Version 5

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| background | #ffffff | Seitenfläche. |
| foreground | #0a0a0a | Normaler, gut lesbarer Text. |
| card | #ffffff | Kartenoberfläche. |
| popover | #ffffff | Oberfläche des Overlays; in dieser Studie wird kein Popover verwendet. |
| popover-foreground | #0a0a0a | Text zur Oberfläche des Overlays. |
| muted | #f5f5f5 | Unterstützende Oberflächen, einschließlich des Originalgrafikbereichs. |
| muted-foreground | #737373 | Sekundäre Beschreibungen und Statusdetails. |
| destructive | #e7000b | Feedback zu ungültigen Eingaben; der Fehler wird auch als Text angezeigt. |
| border | #e5e5e5 | Kartenumrandungen und Listentrennlinien. |
| input | #e5e5e5 | Rahmen des Felds im Ruhezustand. |
| ring | #d4d4d4 | Dokumentierte Standardfarbe für den Ring; diese Studie verwendet einen stärkeren Fokusrahmen in Originalfarbe #737373. |
| primary | #171717 | Oberfläche der primären Aktion und Füllung des Fortschrittsbalkens. |
| primary-foreground | #fafafa | Text zur dunklen Aktionsoberfläche. |
| secondary | #f5f5f5 | Aktionsoberfläche mit geringerer Hervorhebung. |
| secondary-foreground | #171717 | Text zu sekundären Oberflächen. |
| accent | #f7f7f7 | Zusätzliche Akzentoberfläche. |
| accent-foreground | #343434 | Text zur Akzentrolle. |
### Kernfunktionen und Zustände von Button

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| createButton | { Root, Text, Group, Spinner, Icon } | Stelle die tatsächlichen Host-Komponenten bereit; der Creator ergänzt Verhalten, kein vollständiges Theme. |
| Button.Text | Text host | Hält den Button-Text im Kontext seines Zustands. |
| Button.Group | Group host | Generierte Unterkomponente zum Gruppieren von Buttons; in diesem Layout nicht verwendet. |
| Button.Spinner | Spinner host | Generierte Ladeanzeige; bei einer sofortigen lokalen Aktion nicht anzeigen. |
| Button.Icon | Icon host | Generierte Icon-Unterkomponente; die Vorschau verwendet explizite Textaktionen. |
| Button isDisabled | boolean | Deaktiviert das tatsächliche Auslöseverhalten, nicht nur die Darstellung. |
| Button data-focus-visible | true / false | Das ursprüngliche CSS zeigt bei Tastaturfokus einen sichtbaren Rahmen an. |
| Button data-active | true / false | Stellt einen gedrückten Interaktionszustand für das Styling bereit. |
### Kontext und Host-Props der Kernkomponente Input

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| createInput | { Root, Icon, Slot, Input } | Erstellt den Feldkontext und die zugehörigen Slots. |
| Input.Input | TextInput host | Die vom Creator zurückgegebene Texteingabekomponente. |
| isInvalid | Input root boolean | Überträgt ungültigen Kontext und aria-invalid an das Feld. |
| isRequired | Input root boolean | Überträgt den erforderlichen Zustand; die Anwendung führt weiterhin ihre eigene Trim-Validierung aus. |
| value / onChangeText | Controlled TextInput props | Den Entwurfstext im Zustand von React speichern. |
| onSubmitEditing | TextInput callback | Fügt in diesem Browserbeispiel beim Drücken der Eingabetaste ein Element hinzu. |
| maxLength | 60 in the original study | Ein für diese Anwendung gewähltes TextInput-Limit; kein gluestack-Standardwert. |
| aria-label | Item name in the original study | Benennt das Eingabefeld zusätzlich zu einer sichtbaren Beschriftung. |
## gluestack UI 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.

## gluestack UI Designsystem: Versionen, Creator und generierte Komponenten

### Den tatsächlichen Implementierungsweg wählen

> gluestack hat mehr als eine Ebene. Beim standardmäßigen Installationsablauf werden formatierte Komponenten in einer Anwendung generiert. Diese Studie importiert stattdessen createButton und createInput aus dem installierten Core-Paket und stellt React Native Web-Hosts bereit. Dieser Unterschied ist wichtig: Die Installation des Core-Pakets allein stellt weder die generierten Button-Varianten noch das vollständige Theme bereit.

Im ausgeführten Beispiel sind core 5.0.15 und utils 5.0.6 fest vorgegeben. Die React Native Web-Adapter sind echte Komponenten, während Shell und Zustand eigens erstellt wurden. Verwende für die Entwicklung einer vollständigen Expo- oder Next.js-Anwendung die Installationsdokumentation; verwende die vollständigen Dateien hier, um genau diese Browserstudie nachzustellen.

## gluestack UI Designsystem: semantische Farben und explizites Styling

### Rollen festlegen, bevor du Verzierungen auswählst

Die Seite verwendet eine weiße Fläche mit einer dunklen primären Aktion, zurückhaltenden unterstützenden Bereichen und deutlich sichtbaren Rahmen. Diese Werte stammen aus der dokumentierten hellen v5-Palette und werden anschließend explizit über React Native-Stile und gewöhnliche CSS zugewiesen. Kein Laufzeit-Provider wendet sie unbemerkt an.

Bei einem ungültigen Feld werden ein destruktiv eingefärbter Rahmen, eine gut lesbare Erläuterung und die Rückgabe des Fokus kombiniert. Der ursprüngliche Fokusrahmen ist dunkler als der dokumentierte Standardring. Daher kennzeichnet das Stylesheet diese Entscheidung, statt sie als Bibliothekstoken darzustellen.

### Migrationen bewusst durchführen

Ältere Beispiele mit numerischen Palettennamen sollten nicht unbesehen mit dem semantischen Vokabular von v5 vermischt werden. Prüfe die generierte Konfiguration der installierten Version und den Upgrade-Leitfaden, bevor du einen Token-Namen ersetzt. Eine direkte Creator-Studie kann Verhalten veranschaulichen, belegt aber nicht, dass eine vollständige Anwendungsmigration abgeschlossen ist.

## gluestack UI Designsystem: Button-Komposition und Tastaturaktionen

### Alle Host-Komponenten an den Creator übergeben

createButton erhält Pressable, Text, View, ActivityIndicator und einen Icon-Host. Zurückgegeben werden Button sowie die Unterkomponenten Text, Group, Spinner und Icon. Im vollständigen Beispiel wird Button.Text verwendet, statt eine einfache Zeichenfolge direkt in die Pressable-Wurzel zu setzen.

Das Packen ist ein synchroner Zustandsübergang, daher gibt es weder einen erfundenen Spinner noch eine künstliche Speicherverzögerung. Jede Aktion enthält den Elementnamen in ihrer zugänglichen Beschriftung. Die sichtbare Aktion wechselt zwischen „Packen“ und „Auspacken“, damit der nächste Effekt klar bleibt.

### Das gerenderte Verhalten überprüfen

1. Mit der Tabulatortaste zu einer „Packen“-Aktion navigieren und die Leertaste drücken.

2. Bestätigen, dass sich sowohl der Packstatus als auch der Fortschrittswert ändern.

3. „Auspacken“ verwenden und bestätigen, dass dasselbe Element in der Liste bleibt.

4. Den Fokusrahmen überprüfen, statt anzunehmen, dass ein Maus-Hover die Tastaturbedienbarkeit belegt.

## gluestack UI Designsystem: Input-Kontext und vollständige Validierung

### Den zu speichernden Wert validieren

Das Eingabefeld bleibt über value und onChangeText kontrolliert. Beim Hinzufügen wird der Entwurf zunächst getrimmt, ein leeres Ergebnis zurückgewiesen und anschließend werden die Namen ohne Beachtung der Groß- und Kleinschreibung verglichen. Ein abgelehnter Wert bleibt im Feld, damit die Person ihn korrigieren kann.

Die Wurzel erhält isInvalid und isRequired; das tatsächliche Feld erhält die Beschriftung, den Verweis auf die Beschreibung und eine Ref zur Wiederherstellung des Fokus. Die Validierung ist Aufgabe der Anwendung: Ein als erforderlich markiertes Core-Input erstellt nicht automatisch die Regel für doppelte Namen.

### Alle sichtbaren Feldzustände berücksichtigen

- Ausgangszustand: Das Feld ist leer und der Längenhinweis ist sichtbar.

- Ungültig: Die Erläuterung erscheint in einem Alert und das Feld erhält den Fokus.

- Eingabe: Veralteter Fehlertext wird gelöscht, sobald die Person den Entwurf ändert.

- Akzeptiert: Eine neue, nicht gepackte Zeile erscheint, das Feld wird geleert und der Status meldet das hinzugefügte Element.

## gluestack UI Designsystem: stabile Identität und abgeleiteter Fortschritt

### Elemente speichern, Zusammenfassung ableiten

Jedes Element hat eine stabile numerische ID, einen Namen und ein Pack-Flag. Eine Ref liefert neue IDs; der angezeigte Name wird nicht als React-Schlüssel verwendet. Beim Umschalten wird nach ID gefiltert, sodass zwei voneinander unabhängige UI-Aktualisierungen nicht versehentlich ein anderes Element ändern können.

Der Zähler des Fortschritts wird aus den Pack-Flags berechnet, der Nenner aus der aktuellen Liste. Durch das Hinzufügen eines nicht gepackten Elements kann der Prozentsatz sinken, ohne dass bereits gepackte Elemente verloren gehen. Das ist die korrekte Folge einer längeren Checkliste, kein Animationsfehler.

### Zurücksetzen als explizite lokale Aktion gestalten

Zurücksetzen stellt die drei Beispielgegenstände wieder her, löscht den Entwurf und den Fehler, setzt die nächste ID zurück und gibt eine Statusmeldung aus. Auch nach dem Neuladen wird der Beispielzustand angezeigt. Hinter dieser Vorschau stehen weder ein Server noch eine Kontosynchronisierung oder dauerhafte Speicherung.

## gluestack UI-Designsystem: Responsives Layout und eigene Illustrationen

### Verhalten der Host-Umgebung von der Seitengeometrie unterscheiden

Auf dem Desktop steht die Checkliste neben dem Eingabebereich. Bei 700 Pixeln wechselt das Layout zu einer Spalte. Zeilen werden bei Bedarf umgebrochen, und lange Gegenstandsnamen passen sich dem verfügbaren Platz an. Eine Aktion mit fester Breite sollte nicht dazu führen, dass die gesamte Seite horizontal verschoben wird.

Notizbuch und Bleistift sind eigens erstellte Formen von CSS und keine kopierten gluestack-Marken-Assets. Der Kartenradius von 14 Pixeln, der Abstand von 24 Pixeln zwischen den Bereichen und die Überschriftengrößen sind Entscheidungen dieser Studie. Die Referenztabelle hält diese getrennt von den dokumentierten Farbrollen.

## gluestack UI-Designsystem: Browser-Barrierefreiheit und Plattformumfang

### Die tatsächlich dargestellte Umgebung testen

Die Vorschau rendert React Native Web und wurde in einem Browser überprüft. Daraus lässt sich kein Verhalten unter nativem iOS oder Android ableiten. Eine Expo-Anwendung muss Touch-Zielbereiche, Screenreader-Ansagen, das Ausweichen vor der Tastatur und die Plattformnavigation separat prüfen.

Das Fortschrittselement enthält seine Bezeichnung sowie Minimal-, Maximal- und aktuellen Wert. Eine Live-Statusmeldung beschreibt abgeschlossene Aktionen, ohne den Lesefokus von der Checkliste wegzubewegen. Bei einer Ablehnung bleibt der Entwurf im Formular erhalten und der Fokus kehrt zum Feld zurück. Diese Aufgaben liegen auf Anwendungsebene und ergänzen das native Kernverhalten.

## gluestack UI-Designsystem: Vollständiger Build und Abhängigkeitsgrenzen

### Diese Studie exakt nachbilden

Speichere alle vier Dateien aus den Komponentenbeispielen in einem Verzeichnis und installiere die unten aufgeführten, festgelegten Paketversionen. Der Build leitet react-native auf react-native-web um, da interne Importe des Kernmoduls den nativen Modulnamen verwenden. Der Quellcode importiert die Browser-Hosts direkt und lädt keine Expo-Laufzeitumgebung.

Für die eingeschränkte Paketinstallation wird die Legacy-Auflösung von Peer-Abhängigkeiten für diese reine Web-Teilmenge verwendet. Für eine vollständige native Anwendung ist das keine Empfehlung: Die Bibliothek gibt Peer-Abhängigkeiten für native Integrationen, SVG und Safe Areas an, die dieses Paket mit zwei Creators nicht verwendet. Ergänze beim Ausbau der Komponentenbibliothek die passenden Peer-Abhängigkeiten.

### Jeweils nur eine Ebene ändern

1. Erstelle einen Build mit den unveränderten Dateien und überprüfe Hinzufügen, Ablehnung von Duplikaten, Einpacken und Zurücksetzen.

2. Ändere das ursprüngliche Layout oder den Anwendungsinhalt, aber lass die Creator-Verknüpfung unverändert.

3. Wenn du generierte NativeWind-Komponenten übernimmst, ersetze das Styling und die Provider-Einrichtung in einem separaten Integrationsschritt.

4. Überprüfe danach erneut das Tastaturverhalten und die tatsächlichen Zielplattformen.

## gluestack UI-Designsystem: Komponentenbeispiele

### app.jsx — vollständige Studie mit Kernkomponenten

Die tatsächliche Creator-Verknüpfung und das vollständige Zustandsmodell der Checkliste.

```
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
```

Code-Referenz

### style.css — ursprüngliches Layout und explizite helle Farbrollen

Vollständiges responsives Layout, Illustrationen, Zustandsumrandungen und Fokusdarstellung im Browser.

```
*{box-sizing:border-box}body{margin:0;background:#fff;color:#0a0a0a;font-family:Arial,sans-serif}main{max-width:1100px;margin:auto;padding:40px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}.intro{max-width:62ch;color:#737373;line-height:1.6}h1{font-size:52px;line-height:1.03;letter-spacing:-.045em;margin:24px 0}h2{font-size:22px;margin:0 0 20px}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:32px}.panel{border:1px solid #e5e5e5;border-radius:14px;padding:24px;min-width:0}.sectionhead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.badge{font-size:12px;background:#f5f5f5;padding:6px 10px;border-radius:20px}.meter{height:6px;border-radius:8px;background:#f5f5f5;margin:6px 0 24px;overflow:hidden}.meter i{display:block;height:100%;background:#171717}ul{list-style:none;padding:0;margin:0}li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e5e5e5}li>div:first-child{min-width:0;flex:1}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{display:block;font-size:13px;color:#737373;margin-top:8px}.status{font-size:14px;line-height:1.6;margin-top:24px}.hint,.scope{font-size:12px;line-height:1.6;color:#737373}.scope{margin-top:28px}.error{font-size:14px;color:#e7000b;line-height:1.5}label{font-size:14px}.drawing{height:130px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}.book{display:block;background:#171717;color:#fafafa;border-left:5px solid #737373;width:80px;height:96px;padding:22px 12px;font-size:12px;line-height:1.6;transform:rotate(-8deg)}.pencil{height:90px;width:8px;background:#a3a3a3;transform:rotate(14deg)}[data-focus-visible=true]{outline:3px solid #737373;outline-offset:3px}[data-invalid=true]{border-color:#e7000b!important}input:focus-visible{outline:2px solid #737373!important;outline-offset:3px}@media(max-width:700px){main{padding:20px}h1{font-size:40px}.layout{grid-template-columns:1fr}.panel{padding:20px}li{gap:12px;flex-wrap:wrap}li>div:first-child{flex-basis:120px}}
```

Code-Referenz

### build.mjs — vollständige Web-Bundler-Konfiguration

Der native Import-Alias ist erforderlich, obwohl app.jsx die Hosts aus React Native Web importiert.

```
import { build } from 'esbuild';
await build({entryPoints:['app.jsx'],bundle:true,minify:true,outfile:'app.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.ts','.tsx','.json'],loader:{'.js':'jsx'},define:{'process.env.NODE_ENV':'"production"'}});
```

Code-Referenz

### index.html — vollständiger Browser-Einstiegspunkt

Lege diese Datei neben style.css und der generierten app.js ab.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>gluestack field kit</title><link rel="stylesheet" href="style.css"></head><body><div id="app"></div><script src="app.js"></script></body></html>
```

Code-Referenz

## gluestack UI-Designsystem: Einrichtung des AI Agents

### Ausgangspunkt für die Implementierung

Speichere zuerst die vier vollständigen Dateien. Diese Einrichtung ist auf den gezeigten Browser-Ausschnitt beschränkt und initialisiert weder NativeWind noch Uniwind, Expo oder eine generierte Komponentenregistrierung.

```
npm init -y
npm install react@19.3.0 react-dom@19.3.0 react-native-web@0.21.3 @gluestack-ui/core@5.0.15 @gluestack-ui/utils@5.0.6 esbuild@0.28.2 --legacy-peer-deps
node build.mjs
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Ein Prompt für dein Projekt

```
Implementiere die vollständige Browser-Studie des gluestack core 5.0.15 field kit mit createButton/createInput und den Hosts von React Native Web. Bewahre stabile IDs, kontrollierten Entwurfstext, Validierung auf leere Eingaben und Duplikate nach dem Trimmen, die Wiederherstellung des Fokus, die abgeleitete Anzahl eingepackter Gegenstände, das lokale Zurücksetzen und die explizite Zuordnung der hellen v5-Farbrollen. Halte eigene Layoutentscheidungen von den Bibliotheksvorgaben getrennt. Behaupte weder Tests auf nativen Mobilplattformen noch eine dauerhafte Speicherung im Backend.
```

## gluestack UI-Designsystem: Quellen und Geltungsbereich

Das tatsächliche Verhalten von @gluestack-ui/core 5.0.15 über React Native Web 0.21.3. Layout, Illustrationen und Zustandsmodell des Field Kits sind eigene Arbeiten von OpenDesign. Dieses Browserbeispiel mit direkten Creators verwendet explizite Stile. Es handelt sich nicht um die mit der CLI generierte NativeWind-/Uniwind-Komponentenbibliothek; außerdem wurde es nicht auf iOS oder Android getestet.

- Installation Der standardmäßige Installationsweg für generierte Komponenten.

- Semantische v5-Tokens Aktuelle helle Farbrollen und Anpassungsmöglichkeiten.

- Schaltfläche API Aufbau, Interaktion und Zustandsattribute von Buttons.

- Core-Button-Factory Exakte Implementierung des installierten Creators in Version 5.0.15.

- Implementierung des Core-Inputs Kontrolliertes Feld, ungültiger Zustand und Barrierefreiheitsverknüpfung.

- Upgrade auf v5 Versionsmigration und Änderungen an Bezeichnungen.

## gluestack UI-Designsystem: Verwandte Ressourcen

### Headless UI

Headless UI stellt ungestaltete React-Interaktionskomponenten für Dialoge, Listenfelder und Umschalter bereit. Diese Anleitung zeigt, wie sich deren integriertes Fokus-, Auswahl- und Popup-Verhalten mit gewöhnlichem CSS kombinieren lässt. Als Beispiel dient ein Ablauf zum Teilen von Dokumenten.

### HeroUI

Eine Referenz zu HeroUI v3 mit echten semantischen CSS-Variablen, zusammengesetzten React-Steuerelementen, hellen und dunklen Oberflächen sowie einem funktionierenden Rezept für den Bildexport.

### Ionic Framework

Eine native Ionic-Oberfläche für Leseeinstellungen mit überprüften Farbrollen, Geometrie der iOS- und Material-Bereichsregler, echtem Segment- und Schalterverhalten sowie einem Artikel, der auf Auswahl von Schriftart, Größe und Papier reagiert.


- [Implementierungsreferenz](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Quelle](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Quelle](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Quelle](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Code-Referenz](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Code-Referenz](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Code-Referenz](https://github.com/gluestack/gluestack-ui)
- [Installation Der standardmäßige Installationsweg für generierte Komponenten.](https://gluestack.io/ui/docs/home/getting-started/installation)
- [Semantische v5-Tokens Aktuelle helle Farbrollen und Anpassungsmöglichkeiten.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Schaltfläche API Aufbau, Interaktion und Zustandsattribute von Buttons.](https://gluestack.io/ui/docs/components/button)
- [Core-Button-Factory Exakte Implementierung des installierten Creators in Version 5.0.15.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Implementierung des Core-Inputs Kontrolliertes Feld, ungültiger Zustand und Barrierefreiheitsverknüpfung.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Upgrade auf v5 Versionsmigration und Änderungen an Bezeichnungen.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)