Interfaccia utente multipiattaforma e mobile · Nuova risorsa
Sistema di design gluestack UI.
Crea una checklist per un kit da campo con i creatori core Button e Input effettivi di gluestack, i colori semantici v5 espliciti e il codice sorgente completo per React Native Web. Esamina la convalida, le azioni da tastiera, l’identità stabile degli elementi e l’avanzamento della preparazione calcolato localmente.
Comportamento effettivo di @gluestack-ui/core 5.0.15 tramite React Native Web 0.21.3. Il layout del kit da campo, le illustrazioni e il modello di stato sono opera originale di OpenDesign. Questo esempio nel browser usa i creator direttamente e stili espliciti; non è l’insieme di componenti NativeWind/Uniwind generato dalla CLI e non è stato testato su iOS o Android. · Riferimento per l’implementazione
02
Sistema di design gluestack UI Riferimento di design del sistema
Il riferimento distingue i colori chiari documentati della v5 dai creator installati di core API. I creator diretti non applicano automaticamente il tema della CLI. L’anteprima associa esplicitamente i colori elencati a stili originali e usa un contorno di focus personalizzato più marcato. La geometria e le illustrazioni sono scelte dell’applicazione.
gluestack UI Versioni, creator e componenti generati del sistema di design
Scegli il percorso di implementazione effettivo
gluestack è composto da più livelli. Il flusso di installazione standard genera componenti con stile all’interno di un’applicazione. Questo studio importa invece createButton e createInput dal pacchetto core installato e fornisce host React Native Web. La distinzione è importante: installare solo core non fornisce le varianti di Button generate né il tema completo.
L’esempio in esecuzione usa core 5.0.15 e utils 5.0.6. Gli adattatori React Native Web sono componenti reali, mentre la struttura esterna e lo stato sono originali. Per creare un’applicazione completa con Expo o Next.js, consulta la documentazione d’installazione; per riprodurre questo specifico studio nel browser, usa tutti i file qui forniti.
gluestack UI Colori semantici e stili espliciti del sistema di design
Abbina i ruoli prima di scegliere le decorazioni
La pagina usa uno sfondo bianco, un’azione primaria scura, aree di supporto attenuate e ruoli di bordo ben visibili. Questi valori sono ripresi dalla palette chiara documentata della v5 e poi assegnati esplicitamente tramite gli stili Native di React e CSS standard. Nessun provider di runtime li applica in modo implicito.
Un campo non valido combina un contorno del colore di errore con una spiegazione leggibile e il ripristino del focus. Il contorno di focus originale è più scuro del ring predefinito documentato: il foglio di stile indica esplicitamente questa scelta, senza presentarla come un token della libreria.
Pianifica con cura le migrazioni
Gli esempi precedenti che usano nomi numerici per le palette non vanno mescolati senza criterio con il vocabolario semantico della v5. Prima di sostituire il nome di un token, controlla la configurazione generata installata e la guida all’aggiornamento. Uno studio con creator diretti può mostrare il comportamento senza dimostrare che la migrazione completa dell’applicazione sia conclusa.
gluestack UI Composizione di Button e azioni da tastiera del sistema di design
Fornisci al creator tutti gli host necessari
createButton riceve Pressable, Text, View, ActivityIndicator e un host per le icone. Restituisce Button e i sottocomponenti Text, Group, Spinner e Icon. L’esempio completo usa Button.Text invece di inserire una stringa semplice nella radice pressable.
La preparazione è una transizione di stato sincrona, quindi non si simula un indicatore di caricamento né un ritardo di salvataggio. Ogni azione include il nome dell’elemento nell’etichetta accessibile. L’azione visibile cambia da Prepara elemento a Rimuovi preparazione, così l’effetto successivo è sempre chiaro.
Verifica il comportamento visualizzato
Usa Tab per raggiungere un’azione Prepara elemento, poi premi Space.
Verifica che cambino sia lo stato testuale di elemento preparato sia il valore dell’avanzamento.
Usa Rimuovi preparazione e verifica che l’elemento resti nell’elenco.
Controlla il contorno di focus: il passaggio del mouse non dimostra il supporto alla tastiera.
gluestack UI Contesto di Input e validazione completa del sistema di design
Convalida il valore che verrà memorizzato
L’input è controllato tramite value e onChangeText. Prima di aggiungere, si rimuovono gli spazi iniziali e finali dal testo provvisorio, si rifiuta un risultato vuoto e poi si confrontano i nomi senza distinzione tra maiuscole e minuscole. Se il valore non è valido, resta nel campo così l’utente può correggerlo.
La radice riceve isInvalid e isRequired; il campo effettivo riceve l’etichetta, il riferimento alla descrizione e un ref per ripristinare il focus. La validazione è responsabilità dell’applicazione: contrassegnare un input core come obbligatorio non crea la regola che vieta i nomi duplicati.
Gestisci ogni stato visibile del campo
Iniziale: il campo è vuoto e viene mostrato il suggerimento sulla lunghezza.
Non valido: la spiegazione appare in un alert e il campo riceve il focus.
Modifica: il testo di errore non più pertinente scompare mentre l’utente modifica il testo provvisorio.
Accettato: appare una nuova riga non preparata, il campo si svuota e lo stato annuncia l’aggiunta.
gluestack UI Identità stabile e avanzamento calcolato del sistema di design
Memorizza gli elementi e calcola il riepilogo
Ogni elemento ha un id numerico stabile, un nome e un flag packed. Un ref fornisce nuovi id; il nome visualizzato non viene usato come chiave React. L’attivazione aggiorna gli elementi in base all’id, così due aggiornamenti dell’interfaccia distinti non possono modificare per errore una riga diversa.
Il numeratore dell’avanzamento è calcolato a partire dai flag packed e il denominatore dall’elenco corrente. Aggiungere un elemento non preparato può ridurre la percentuale senza perdere quelli già preparati. È la conseguenza corretta di una lista di controllo più ampia, non un errore di animazione.
Rendi esplicita l’azione di ripristino locale
Ripristina i tre elementi di esempio, cancella il testo provvisorio e l’errore, reimposta l’id successivo e annuncia il risultato. Anche dopo il ricaricamento, viene visualizzato lo stato iniziale di esempio. Questa anteprima non usa server, sincronizzazione degli account o archiviazione persistente.
gluestack UI Layout adattabile e illustrazioni originali del sistema di design
Distingui il comportamento degli host dalla geometria della pagina
Su desktop, la composizione affianca la lista di controllo al pannello di input. A 700 pixel passa a una sola colonna. Le righe vanno a capo quando necessario e i nomi lunghi si spezzano nello spazio disponibile: un’azione a larghezza fissa non dovrebbe costringere l’intero documento a scorrere orizzontalmente.
Il quaderno e la matita sono forme originali di CSS, non risorse del marchio gluestack copiate. Il raggio di 14 pixel delle schede, la spaziatura di 24 pixel dei pannelli e la scala dei titoli sono scelte di questo studio. La tabella di riferimento li distingue dai ruoli cromatici documentati.
gluestack UI Accessibilità nel browser e ambito delle piattaforme del sistema di design
Verifica l’ambiente effettivamente rappresentato
L’anteprima esegue il rendering con React Native Web ed è stata verificata in un browser. Non dimostra il comportamento nativo su iOS o Android. Un’applicazione Expo deve verificare separatamente le dimensioni delle aree interattive, gli annunci degli screen reader, la gestione della tastiera e la navigazione della piattaforma.
L’elemento di avanzamento include nome, valore minimo, valore massimo e valore corrente. Uno stato dinamico descrive le azioni completate senza distogliere il lettore dalla lista di controllo. In caso di rifiuto, il modulo conserva la bozza e riporta il focus sul campo. Queste responsabilità dell’applicazione si aggiungono al comportamento nativo di base.
Build completo del sistema di design gluestack UI e confine delle dipendenze
Riproduci esattamente questo esempio
Salva i quattro file di Component Examples nella stessa directory e installa i pacchetti fissati mostrati qui sotto. La build associa react-native a react-native-web, perché il core importa internamente il modulo nativo con quel nome. Il sorgente importa direttamente gli host per browser e non carica un runtime Expo.
L’installazione ridotta dei pacchetti usa la risoluzione legacy delle dipendenze peer per questo sottoinsieme destinato solo al web. Non è una raccomandazione per un’applicazione nativa completa: la libreria completa dichiara dipendenze peer per integrazioni native, SVG e safe-area che questo bundle con due creator non utilizza. Aggiungi le dipendenze peer corrette quando ampli l’insieme di componenti.
Modifica un livello alla volta
Compila i file senza modificarli e verifica aggiunta, rifiuto dei duplicati, preparazione e ripristino.
Modifica il layout originale o i contenuti dell’applicazione mantenendo intatti i collegamenti ai creator.
Se adotti componenti NativeWind generati, sostituisci lo stile e la configurazione del provider in un passaggio di integrazione separato.
Dopo la modifica, verifica nuovamente il comportamento della tastiera e le piattaforme di destinazione effettive.
Esempi di componenti del sistema di design gluestack UI
app.jsx — esempio completo con componenti core
Collegamenti effettivi ai creator e modello completo dello stato della lista di controllo.
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/>);
Configurazione dell’agente per il sistema di design gluestack UI
Punto di partenza per l’implementazione
Salva prima i quattro file completi. Questa configurazione è limitata al sottoinsieme per browser mostrato e non inizializza NativeWind, Uniwind, Expo né un registro di componenti generato.
Implementa l’esempio browser completo del field kit di gluestack core 5.0.15 usando createButton/createInput e gli host di React Native Web. Mantieni gli id stabili, il testo controllato della bozza, la validazione con trim e controllo dei duplicati, il ripristino del focus, il conteggio degli elementi preparati derivato, il ripristino locale e la mappatura esplicita ai ruoli chiari della v5. Tieni separate le scelte di layout originali dalle impostazioni predefinite della libreria. Non dichiarare test su dispositivi mobili nativi né persistenza backend.
05
Fonti e ambito del sistema di design gluestack UI
Comportamento effettivo di @gluestack-ui/core 5.0.15 tramite React Native Web 0.21.3. Layout, illustrazioni e modello dello stato del field kit sono opera originale OpenDesign. Questo esempio per browser usa creator diretti e stili espliciti; non è l’insieme di componenti generato dalla CLI per NativeWind/Uniwind e non è stato testato su iOS o Android.
