Interface multiplateforme et mobile · Nouvelle ressource
Système de design gluestack UI.
Créez une liste de préparation avec les véritables créateurs Button et Input de gluestack, les couleurs sémantiques explicites de la v5 et le code source complet de React Native Web. Examinez la validation, les actions au clavier, l’identité stable des éléments et le calcul local de la progression de préparation.
Comportement réel de @gluestack-ui/core 5.0.15 via React Native Web 0.21.3. La mise en page, les illustrations et le modèle d’état du kit de terrain sont des créations originales de OpenDesign. Cet exemple de navigateur utilisant directement les fonctions de création repose sur des styles explicites ; il ne s’agit pas de l’ensemble de composants NativeWind/Uniwind généré par la CLI, et il n’a pas été testé sur iOS ou Android. · Référence de mise en œuvre
02
gluestack UI — Référence du système de design
Cette référence distingue les couleurs claires documentées en v5 du factory core installé API. Les factories directes n’appliquent pas automatiquement le thème de la CLI. L’aperçu associe explicitement les couleurs répertoriées aux styles d’origine et utilise un contour de focus personnalisé plus marqué. La géométrie et les illustrations relèvent de choix propres à l’application.
gluestack UI — Versions, factories et composants générés du système de design
Choisissez la méthode d’implémentation appropriée
gluestack comporte plusieurs couches. Le processus d’installation standard génère des composants stylisés dans une application. Cette étude importe plutôt createButton et createInput depuis le package core installé et leur fournit des composants hôtes React Native Web. Cette distinction est importante : l’installation de core seul ne fournit ni les variantes de boutons générées ni le thème complet.
L’exemple en cours d’exécution utilise core 5.0.15 et utils 5.0.6. Ses adaptateurs React Native Web sont de vrais composants, tandis que la structure et l’état sont propres à l’exemple. Consultez la documentation d’installation pour créer une application Expo ou Next.js complète ; utilisez les fichiers complets présentés ici pour reproduire cette étude spécifique dans un navigateur.
gluestack UI — Couleurs sémantiques et styles explicites du système de design
Associez les rôles avant de choisir les éléments décoratifs
La page utilise un fond blanc, une action principale sombre, des zones d’accompagnement atténuées et des rôles de bordure bien visibles. Ces valeurs sont reprises de la palette claire documentée en v5, puis attribuées explicitement au moyen des styles Native de React et de CSS classiques. Aucun fournisseur d’exécution ne les applique de manière implicite.
Un champ invalide associe un contour de couleur d’erreur à une explication lisible et rend le focus au champ. Le contour de focus d’origine est plus sombre que l’anneau par défaut documenté ; la feuille de style précise donc qu’il s’agit d’un choix propre à l’exemple, et non d’un jeton de la bibliothèque.
Procédez aux migrations avec méthode
Ne mélangez pas sans discernement les anciens exemples utilisant des noms de palette numériques avec le vocabulaire sémantique de la v5. Examinez la configuration générée installée et le guide de mise à niveau avant de remplacer le nom d’un jeton. Une étude avec des factories directes peut illustrer le comportement sans pour autant prouver que la migration complète d’une application est terminée.
gluestack UI — Composition des boutons et actions au clavier du système de design
Fournissez tous les composants hôtes à la factory
createButton reçoit Pressable, Text, View, ActivityIndicator et un composant hôte pour les icônes. Il renvoie Button ainsi que les sous-composants Text, Group, Spinner et Icon. L’exemple complet utilise Button.Text au lieu de placer une chaîne brute dans la racine pressable.
L’emballage est une transition d’état synchrone : aucun indicateur de chargement ni délai de sauvegarde n’est donc simulé. Chaque action inclut le nom de l’élément dans son libellé accessible. Le libellé visible alterne entre « Emballer l’élément » et « Déballer » afin que l’action suivante reste claire.
Vérifiez le comportement rendu
Appuyez sur Tab jusqu’à une action « Emballer l’élément », puis sur Espace.
Vérifiez que l’état textuel d’emballage et la valeur de progression changent.
Utilisez « Déballer » et vérifiez que le même élément reste dans la liste.
Examinez le contour de focus : un survol à la souris ne suffit pas à prouver la prise en charge du clavier.
gluestack UI — Contexte Input et validation complète du système de design
Validez la valeur qui sera enregistrée
Le champ reste contrôlé au moyen de value et onChangeText. Lors de l’ajout, le brouillon est d’abord débarrassé de ses espaces superflus ; si le résultat est vide, l’ajout est refusé, puis les noms sont comparés sans tenir compte de la casse. Une valeur refusée reste dans le champ afin que l’utilisateur puisse la corriger.
La racine reçoit isInvalid et isRequired ; le champ réel reçoit le libellé, la référence vers la description et une ref permettant de rétablir le focus. La validation relève de l’application : rendre un champ core obligatoire ne crée pas la règle qui interdit les doublons.
Gérez tous les états visibles du champ
Initial : le champ est vide et l’indication de longueur est visible.
Invalide : l’explication apparaît dans une alerte et le focus est placé sur le champ.
Modification : le texte d’erreur obsolète disparaît lorsque l’utilisateur modifie le brouillon.
Accepté : une nouvelle ligne non emballée apparaît, le champ est vidé et le statut confirme l’ajout.
gluestack UI — Identité stable et progression dérivée du système de design
Enregistrez les éléments, calculez le récapitulatif
Chaque élément possède un identifiant numérique stable, un nom et un indicateur d’emballage. Une ref fournit les nouveaux identifiants ; le nom affiché ne sert pas de clé React. Le basculement s’effectue par identifiant : deux mises à jour indépendantes de l’interface ne peuvent donc pas modifier par inadvertance une autre ligne.
Le numérateur de la progression est calculé à partir des indicateurs d’emballage et le dénominateur à partir de la liste actuelle. L’ajout d’un article non emballé peut faire baisser le pourcentage sans retirer les articles déjà emballés. C’est la conséquence normale d’une liste plus longue, et non une erreur d’animation.
Faire de la réinitialisation une action locale explicite
La réinitialisation restaure les trois articles d’exemple, efface le brouillon et l’erreur, réinitialise l’identifiant suivant et annonce le résultat. Un rechargement rétablit également l’état d’exemple. Cette prévisualisation ne repose sur aucun serveur, aucune synchronisation de compte ni aucun stockage persistant.
Système de design gluestack UI : mise en page responsive et illustrations originales
Distinguer le comportement de l’hôte de la géométrie de la page
Sur ordinateur, la liste de contrôle est placée à côté de son panneau de saisie. À 700 pixels, la mise en page passe sur une seule colonne. Les lignes passent à la ligne si nécessaire et les noms d’articles longs se coupent dans l’espace disponible ; une action à largeur fixe ne doit pas décaler toute la page horizontalement.
Le carnet et le crayon sont des formes originales de CSS, et non des ressources de marque gluestack copiées. Le rayon de 14 pixels des cartes, l’espacement de 24 pixels entre les panneaux et l’échelle des titres sont des choix propres à cette étude. Le tableau de référence les distingue des rôles de couleur documentés.
Système de design gluestack UI : accessibilité du navigateur et périmètre des plateformes
Tester l’environnement réellement représenté
La prévisualisation utilise React Native Web et a été vérifiée dans un navigateur. Elle ne permet pas d’établir le comportement natif sur iOS ou Android. Une application Expo doit vérifier séparément les zones tactiles, les annonces du lecteur d’écran, l’évitement du clavier et la navigation propre à chaque plateforme.
L’élément de progression comprend son nom, ses valeurs minimale et maximale, ainsi que sa valeur actuelle. Un statut dynamique décrit les actions accomplies sans déplacer le lecteur de la liste de contrôle. En cas de rejet, le formulaire conserve le brouillon et redonne le focus au champ. Il s’agit de responsabilités de l’application qui s’ajoutent au comportement natif de base.
Système de design gluestack UI : compilation complète et périmètre des dépendances
Reproduire cette étude à l’identique
Enregistrez les quatre fichiers de la section Component Examples dans un même dossier et installez les packages épinglés indiqués ci-dessous. La configuration de compilation associe react-native à react-native-web, car les imports internes utilisent le nom du module natif. Le code source importe directement les hôtes du navigateur et ne charge jamais l’environnement d’exécution Expo.
L’installation de ce sous-ensemble restreint de packages utilise la résolution historique des dépendances peer, pour le Web uniquement. Ce n’est pas une recommandation pour une application native complète : la bibliothèque entière déclare des dépendances peer pour les intégrations natives, SVG et safe-area que ce bundle à deux créateurs n’utilise pas. Ajoutez les dépendances peer appropriées si vous élargissez l’ensemble de composants.
Modifier une seule couche à la fois
Compilez les fichiers sans modification, puis vérifiez l’ajout, le rejet des doublons, l’emballage et la réinitialisation.
Modifiez la mise en page originale ou le contenu de l’application sans toucher au câblage des créateurs.
Si vous adoptez les composants NativeWind générés, remplacez le style et la configuration du fournisseur dans une étape d’intégration distincte.
Après cette modification, vérifiez à nouveau le comportement du clavier et les plateformes réellement ciblées.
gluestack UI Exemples de composants du système de design
app.jsx — étude complète du composant de base
Le câblage réel des créateurs et l’intégralité du modèle d’état de la liste de contrôle.
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 Configuration de l’agent pour le système de design
Point de départ de l’implémentation
Enregistrez d’abord les quatre fichiers complets. Cette configuration se limite au sous-ensemble du navigateur présenté ici et n’initialise ni NativeWind, ni Uniwind, ni Expo, ni un registre de composants généré.
Implémentez l’étude complète pour le navigateur du kit de champs gluestack core 5.0.15 à l’aide de createButton/createInput et des hôtes React Native Web. Préservez les identifiants stables, le texte contrôlé du brouillon, la suppression des espaces et la validation des doublons, la restauration du focus, le décompte calculé des articles emballés, la réinitialisation locale et le mappage explicite des rôles clairs de la v5. Distinguez les choix de mise en page originaux des valeurs par défaut de la bibliothèque. Ne prétendez pas avoir effectué des tests sur mobile natif ni disposer d’une persistance côté serveur.
05
gluestack UI Sources et périmètre du système de design
Comportement réel de @gluestack-ui/core 5.0.15 via React Native Web 0.21.3. La mise en page, les illustrations et le modèle d’état du kit de champs sont des créations originales de OpenDesign. Cet exemple pour navigateur utilise directement les créateurs et des styles explicites ; il ne s’agit pas de l’ensemble de composants NativeWind/Uniwind généré par l’interface en ligne de commande, et il n’a pas été testé sur iOS ou Android.
