Interfaz de usuario multiplataforma y móvil · Nuevo recurso
Sistema de diseño gluestack UI.
Crea una lista de verificación para un kit de campo con los creadores reales de Button e Input de gluestack, colores semánticos explícitos de v5 y el código fuente completo de React Native Web. Examina la validación, las acciones de teclado, la identidad estable de los elementos y el progreso de preparación calculado localmente.
Comportamiento real de @gluestack-ui/core 5.0.15 mediante React Native Web 0.21.3. El diseño del equipo de campo, las ilustraciones y el modelo de estado son obra original de OpenDesign. Este ejemplo de navegador con creadores directos usa estilos explícitos; no es el conjunto de componentes de NativeWind/Uniwind generado por CLI y no se ha probado en iOS ni Android. · Referencia de implementación
02
Referencia de diseño del sistema de diseño gluestack UI
La referencia distingue los colores claros documentados de v5 del API de los creadores del núcleo instalado. Los creadores directos no aplican automáticamente el tema de CLI. La vista previa asigna explícitamente los colores indicados a estilos originales y usa un contorno de foco personalizado más marcado. La geometría y las ilustraciones son decisiones de la aplicación.
Versiones, creadores y componentes generados del sistema de diseño gluestack UI
Elige la ruta de implementación adecuada
gluestack tiene más de una capa. El flujo de instalación estándar genera componentes con estilos directamente en una aplicación. En cambio, este estudio importa createButton y createInput del paquete core instalado y proporciona componentes host de React Native Web. La distinción importa: instalar solo core no proporciona las variantes de botón generadas ni el tema completo.
El ejemplo en ejecución fija las versiones core 5.0.15 y utils 5.0.6. Sus adaptadores de React Native Web son componentes reales, mientras que la estructura y el estado son originales. Consulta la documentación de instalación si vas a crear una aplicación completa con Expo o Next.js; utiliza los archivos completos de aquí para reproducir este estudio específico para navegador.
Colores semánticos y estilos explícitos del sistema de diseño gluestack UI
Asigna los roles antes de elegir los adornos
La página utiliza un lienzo blanco con una acción principal oscura, áreas de apoyo atenuadas y roles de borde visibles. Estos valores se toman de la paleta clara v5 documentada y luego se asignan explícitamente mediante estilos de React Native y CSS estándar. Ningún proveedor de ejecución los aplica de forma implícita.
Un campo no válido combina un contorno de color destructivo con una explicación legible y la devolución del foco. El contorno de foco original es más oscuro que el anillo predeterminado documentado, por lo que la hoja de estilos identifica esa elección en lugar de presentarla como un token de la biblioteca.
Planifica las migraciones con cuidado
No combines a ciegas los ejemplos antiguos que utilizan nombres de paleta numéricos con el vocabulario semántico de v5. Revisa la configuración generada instalada y la guía de actualización antes de sustituir el nombre de un token. Un estudio directo del creador puede mostrar el comportamiento, pero no demuestra que la migración completa de una aplicación haya terminado.
Composición de Button y acciones de teclado del sistema de diseño gluestack UI
Proporciona todos los componentes host al creador
createButton recibe Pressable, Text, View, ActivityIndicator y un componente host para iconos. Devuelve Button y los subcomponentes Text, Group, Spinner e Icon. El ejemplo completo utiliza Button.Text en vez de colocar una cadena sin más en la raíz del elemento interactivo.
Empaquetar es una transición de estado síncrona, así que no se inventa un indicador de carga ni una demora de guardado. Cada acción incluye el nombre del elemento en su etiqueta accesible. La acción visible cambia entre «Empaquetar elemento» y «Desempaquetar» para que el siguiente efecto siga siendo claro.
Comprueba el comportamiento renderizado
Ve con Tab a una acción «Empaquetar elemento» y pulsa Espacio.
Confirma que cambian tanto el estado de empaquetado textual como el valor de progreso.
Utiliza «Desempaquetar» y confirma que el mismo elemento permanece en la lista.
Inspecciona el contorno de foco; no des por hecho que pasar el ratón por encima demuestra que se admite el teclado.
Contexto de Input y validación completa del sistema de diseño gluestack UI
Valida el valor que se va a guardar
El campo permanece controlado mediante value y onChangeText. Al añadir, primero se eliminan los espacios sobrantes del texto en edición; si queda vacío, se rechaza. Después, se comparan los nombres sin distinguir mayúsculas de minúsculas. Si se rechaza el valor, permanece en el campo para que el usuario pueda corregirlo.
El elemento raíz recibe isInvalid e isRequired; el campo real recibe la etiqueta, la referencia a la descripción y una ref para restaurar el foco. La validación corresponde a la aplicación: marcar un campo core como obligatorio no crea la regla para nombres duplicados.
Gestiona todos los estados visibles del campo
Inicial: el campo está vacío y se muestra el indicador de longitud.
No válido: la explicación aparece en una alerta y el campo recibe el foco.
Edición: el texto de error obsoleto desaparece cuando el usuario modifica el texto en edición.
Aceptado: aparece una nueva fila sin empaquetar, se vacía el campo y el estado anuncia que se añadió el elemento.
Identidad estable y progreso derivado del sistema de diseño gluestack UI
Guarda los elementos y calcula el resumen
Cada elemento tiene un id numérico estable, un nombre y una marca de empaquetado. Una ref proporciona los nuevos id; el nombre mostrado no se utiliza como clave de React. Los cambios se aplican por id, así que dos actualizaciones independientes de la interfaz no pueden modificar por accidente otra fila.
El numerador del progreso se calcula a partir de las marcas de empaquetado y el denominador, a partir de la lista actual. Añadir un elemento sin empaquetar puede reducir el porcentaje sin perder los elementos ya empaquetados. Es la consecuencia correcta de ampliar la lista de comprobación, no un error de animación.
Haz que restablecer sea una acción local explícita
Restablecer recupera los tres elementos de ejemplo, borra el texto en edición y el error, reinicia el siguiente id y anuncia el resultado. Al volver a cargar la página también se inicia con el estado de ejemplo. Esta vista previa no utiliza servidor, sincronización de cuentas ni almacenamiento persistente.
Diseño adaptable e ilustración original del sistema de diseño gluestack UI
Distingue el comportamiento del componente host de la geometría de la página
En la composición de escritorio, la lista de verificación aparece junto al panel de entrada. A 700 píxeles, pasa a una sola columna. Las filas se ajustan cuando es necesario y los nombres largos de los elementos se dividen dentro del espacio disponible; una acción de ancho fijo no debería desplazar todo el documento horizontalmente.
El cuaderno y el lápiz son formas originales de CSS, no recursos de marca de gluestack copiados. El radio de 14 píxeles de la tarjeta, el espaciado de 24 píxeles entre paneles y la escala de los encabezados son decisiones del estudio. La tabla de referencia los mantiene separados de los roles de color documentados.
Accesibilidad y alcance de plataforma del sistema de diseño de gluestack UI
Prueba el entorno representado realmente
La vista previa renderiza React Native Web y se ha comprobado en un navegador. No demuestra el comportamiento nativo en iOS o Android. Una aplicación de Expo debe verificar por separado los objetivos táctiles, los anuncios del lector de pantalla, la adaptación al teclado y la navegación de la plataforma.
El elemento de progreso incluye su nombre, valor mínimo, valor máximo y valor actual. Un estado dinámico describe las acciones completadas sin apartar al lector de la lista de verificación. Si se rechaza el formulario, conserva el borrador y devuelve el foco al campo. Estas responsabilidades de la aplicación se añaden al comportamiento nativo básico.
Compilación completa y límites de dependencias del sistema de diseño de gluestack UI
Reproduce este estudio exacto
Guarda los cuatro archivos de Ejemplos de componentes en un mismo directorio e instala los paquetes fijados que se indican a continuación. La compilación asigna react-native a react-native-web, ya que las importaciones del núcleo usan internamente el nombre del módulo nativo. El código fuente importa directamente los hosts de navegador y nunca carga un entorno de ejecución de Expo.
La instalación reducida de paquetes usa la resolución heredada de dependencias entre pares para este subconjunto exclusivo de web. No es una recomendación para una aplicación nativa completa: la biblioteca completa declara dependencias entre pares para integraciones nativas, SVG y de áreas seguras que este paquete de dos creadores no utiliza. Añade las dependencias entre pares adecuadas al ampliar el conjunto de componentes.
Cambia una capa a la vez
Compila los archivos sin modificar y verifica las acciones de añadir, rechazar duplicados, guardar y restablecer.
Cambia el diseño original o el contenido de la aplicación sin alterar la configuración de los creadores.
Si adoptas componentes de NativeWind generados, sustituye el estilo y la configuración del proveedor como un paso de integración independiente.
Después del cambio, vuelve a comprobar el comportamiento del teclado y las plataformas de destino reales.
Ejemplos de componentes del sistema de diseño de gluestack UI
app.jsx — estudio completo del componente principal
Configuración real de los creadores y modelo de estado completo de la lista de verificación.
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/>);
Configuración del agente del sistema de diseño de gluestack UI
Punto de partida para la implementación
Guarda primero los cuatro archivos completos. Esta configuración se limita al subconjunto de navegador mostrado y no inicializa NativeWind, Uniwind, Expo ni un registro de componentes generado.
Implementa el estudio completo en navegador de gluestack core 5.0.15 para el kit de campo mediante createButton/createInput y hosts de React Native Web. Conserva los ID estables, el texto controlado del borrador, la validación de espacios y duplicados, la restauración del foco, el recuento derivado de elementos guardados, el restablecimiento local y la asignación explícita de roles claros de v5. Mantén separadas las decisiones de diseño originales de los valores predeterminados de la biblioteca. No afirmes que se ha probado en móviles nativos ni que hay persistencia en el backend.
05
Fuentes y alcance del sistema de diseño de gluestack UI
Comportamiento real de @gluestack-ui/core 5.0.15 a través de React Native Web 0.21.3. El diseño del kit de campo, las ilustraciones y el modelo de estado son obra original de OpenDesign. Este ejemplo de navegador con creadores directos usa estilos explícitos; no es el conjunto de componentes NativeWind/Uniwind generado por CLI y no se ha probado en iOS ni Android.
