Plattformübergreifende und mobile Benutzeroberflächen · Neue Ressource
gluestack UI-Designsystem.
Erstelle eine Checkliste für die Ausrüstung mit den echten gluestack-Creators für Core Button und Input, expliziten semantischen Farben aus v5 und vollständigem React Native Web-Quellcode. Untersuche Validierung, Tastaturaktionen, stabile Elementidentität und lokal abgeleiteten Packfortschritt.
Tatsächliches Verhalten von @gluestack-ui/core 5.0.15 über React Native Web 0.21.3. Layout, Illustrationen und Zustandsmodell des Outdoor-Sets sind eigene Arbeiten unter OpenDesign. Dieses Browserbeispiel mit direkten Creators verwendet explizite Stile. Es ist nicht das über CLI generierte NativeWind-/Uniwind-Komponentenset und wurde nicht auf iOS oder Android getestet. · Implementierungsreferenz
02
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.
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
Mit der Tabulatortaste zu einer „Packen“-Aktion navigieren und die Leertaste drücken.
Bestätigen, dass sich sowohl der Packstatus als auch der Fortschrittswert ändern.
„Auspacken“ verwenden und bestätigen, dass dasselbe Element in der Liste bleibt.
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
Erstelle einen Build mit den unveränderten Dateien und überprüfe Hinzufügen, Ablehnung von Duplikaten, Einpacken und Zurücksetzen.
Ändere das ursprüngliche Layout oder den Anwendungsinhalt, aber lass die Creator-Verknüpfung unverändert.
Wenn du generierte NativeWind-Komponenten übernimmst, ersetze das Styling und die Provider-Einrichtung in einem separaten Integrationsschritt.
Ü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.
jsx
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/>);
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.
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.
05
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.
