Crie uma lista de conferência para um kit de campo com os criadores reais de Button e Input do gluestack, cores semânticas explícitas da v5 e o código-fonte completo de React Native Web. Examine a validação, as ações de teclado, a identidade estável dos itens e o progresso de preparação derivado localmente.
Comportamento real de @gluestack-ui/core 5.0.15 por meio de React Native Web 0.21.3. O layout, a arte e o modelo de estado do kit de campo são criações originais de OpenDesign. Este exemplo para navegador usa criadores diretos e estilos explícitos; não é o conjunto de componentes NativeWind/Uniwind gerado pela CLI e não foi testado no iOS nem no Android. · Referência de implementação
02
Referência de design do sistema de design gluestack UI
A referência distingue as cores claras documentadas da v5 do API do criador principal instalado. Os criadores diretos não aplicam automaticamente o tema da CLI. A prévia associa explicitamente as cores listadas a estilos originais e usa um contorno de foco personalizado mais destacado. A geometria e a arte são escolhas do aplicativo.
gluestack UI Versões, criadores e componentes gerados do sistema de design
Escolha o caminho de implementação adequado
O gluestack tem mais de uma camada. O fluxo de instalação padrão gera componentes estilizados em um aplicativo. Neste estudo, em vez disso, importamos createButton e createInput do pacote core instalado e fornecemos os componentes de host React Native Web. Essa distinção é importante: instalar apenas o core não fornece as variantes de botão geradas nem o tema completo.
O exemplo em execução fixa as versões core 5.0.15 e utils 5.0.6. Seus adaptadores React Native Web são componentes reais, enquanto o invólucro e o estado são originais. Consulte a documentação de instalação para criar um aplicativo completo com Expo ou Next.js; use os arquivos completos aqui para reproduzir este estudo específico no navegador.
gluestack UI Cores semânticas e estilização explícita do sistema de design
Defina os papéis antes de escolher a decoração
A página usa um plano de fundo branco, uma ação principal escura, áreas de apoio discretas e bordas visíveis. Esses valores são copiados da paleta clara documentada da v5 e depois atribuídos explicitamente por meio dos estilos Native do React e de regras CSS comuns. Nenhum provedor em tempo de execução os aplica silenciosamente.
Um campo inválido combina um contorno na cor de erro com uma explicação legível e o retorno do foco. O contorno de foco original é mais escuro que o anel padrão documentado; por isso, a folha de estilos identifica essa escolha em vez de apresentá-la como um token da biblioteca.
Faça migrações com intenção
Exemplos antigos que usam nomes numéricos para paletas não devem ser combinados sem critério com a nomenclatura semântica da v5. Verifique a configuração gerada instalada e o guia de atualização antes de substituir o nome de um token. Um estudo direto do criador pode demonstrar o comportamento sem comprovar que a migração de um aplicativo completo foi concluída.
gluestack UI Composição de Button e ações de teclado do sistema de design
Forneça todos os componentes de host ao criador
createButton recebe Pressable, Text, View, ActivityIndicator e um componente de host para ícones. Ele retorna Button e os subcomponentes Text, Group, Spinner e Icon. O exemplo completo usa Button.Text em vez de inserir uma string simples diretamente no elemento raiz pressable.
Empacotar é uma transição de estado síncrona, portanto não há indicador de carregamento inventado nem atraso de salvamento. Cada ação inclui o nome do item no rótulo acessível. A ação visível alterna entre Empacotar item e Desempacotar, deixando claro qual será o próximo efeito.
Verifique o comportamento renderizado
Navegue com Tab até uma ação Empacotar item e pressione Espaço.
Confirme que o estado textual de item empacotado e o valor do progresso mudam.
Use Desempacotar e confirme que o mesmo item continua na lista.
Inspecione o contorno de foco; não presuma que passar o mouse comprova o suporte ao teclado.
gluestack UI Contexto do Input e validação completa do sistema de design
Valide o valor que será armazenado
O campo de entrada permanece controlado por meio de value e onChangeText. Ao adicionar, primeiro remove os espaços em branco iniciais e finais do texto em edição, rejeita um resultado vazio e, em seguida, compara os nomes sem diferenciar maiúsculas de minúsculas. Um valor rejeitado permanece no campo para que o usuário possa corrigi-lo.
O elemento raiz recebe isInvalid e isRequired; o campo real recebe o rótulo, a referência à descrição e uma ref para restaurar o foco. A validação é responsabilidade do aplicativo: marcar um input do core como obrigatório não cria a regra contra nomes duplicados.
Trate todos os estados visíveis do campo
Inicial: o campo está vazio e a dica de limite de caracteres está visível.
Inválido: a explicação aparece em um alerta e o campo recebe o foco.
Em edição: o texto do erro anterior desaparece conforme o usuário altera o texto em edição.
Aceito: uma nova linha descompactada aparece, o campo é limpo e o status informa o item adicionado.
gluestack UI Identidade estável e progresso derivado do sistema de design
Armazene os itens e derive o resumo
Cada item tem um id numérico estável, um nome e uma flag de empacotamento. Uma ref fornece novos ids; o nome exibido não é usado como React key. A alternância é feita pelo id, para que duas atualizações de interface independentes não alterem acidentalmente outra linha.
O numerador do progresso é calculado a partir das flags de empacotamento, e o denominador, a partir da lista atual. Adicionar um item descompactado pode reduzir a porcentagem sem desfazer o empacotamento dos itens anteriores. Esse é o resultado esperado de uma lista maior, não um erro de animação.
Torne a redefinição uma ação local explícita
A redefinição restaura os três itens de exemplo, limpa o texto em edição e o erro, reinicia o próximo id e anuncia o resultado. Recarregar a página também restaura o estado de exemplo. Esta prévia não usa servidor, sincronização de conta nem armazenamento persistente.
gluestack UI Layout responsivo e arte original do sistema de design
Diferencie o comportamento dos componentes de host da geometria da página
No computador, a composição posiciona a lista de verificação ao lado do painel de entrada. Em 700 pixels, ela passa a ter uma única coluna. As linhas quebram quando necessário, e nomes longos de itens também quebram dentro do espaço disponível; uma ação de largura fixa não deve empurrar todo o documento para o lado.
O caderno e o lápis são formas originais de CSS, não recursos de marca da gluestack copiados. O raio de 14 pixels dos cartões, o espaçamento de 24 pixels entre painéis e a escala dos títulos são decisões deste estudo. A tabela de referência os mantém separados das funções de cor documentadas.
Acessibilidade e escopo de plataforma do sistema de design gluestack UI
Teste o ambiente realmente representado
A prévia renderiza React Native Web e foi verificada em um navegador. Ela não comprova o comportamento nativo no iOS ou Android. Um aplicativo Expo deve verificar separadamente as áreas de toque, os anúncios para leitores de tela, o ajuste ao teclado e a navegação da plataforma.
O elemento de progresso inclui seu nome, valor mínimo, valor máximo e valor atual. Um status dinâmico descreve as ações concluídas sem tirar o leitor da lista de verificação. Se o envio for rejeitado, o formulário preserva o rascunho e devolve o foco ao campo. Essas são responsabilidades do aplicativo, complementares ao comportamento nativo do núcleo.
Compilação completa e limites de dependências do sistema de design gluestack UI
Reproduza este estudo exatamente
Salve os quatro arquivos de Exemplos de componentes no mesmo diretório e instale os pacotes fixados mostrados abaixo. A compilação mapeia react-native para react-native-web, pois as importações internas do módulo usam o nome nativo. O código-fonte importa os hosts diretamente do navegador e nunca carrega o ambiente de execução do Expo.
A instalação reduzida dos pacotes usa a resolução legada de dependências peer para este subconjunto exclusivo da Web. Isso não é uma recomendação para um aplicativo nativo completo: a biblioteca inteira declara dependências peer para integrações nativas, SVG e safe area que este pacote específico de dois criadores não utiliza. Ao ampliar o conjunto de componentes, adicione as dependências peer corretas.
Altere uma camada por vez
Compile os arquivos sem alterações e verifique a adição, a rejeição de duplicatas, o empacotamento e a redefinição.
Altere o layout original ou o conteúdo do aplicativo sem modificar a integração dos criadores.
Se adotar componentes NativeWind gerados, substitua a configuração de estilos e do provedor em uma etapa de integração separada.
Após essa alteração, verifique novamente o comportamento do teclado e as plataformas de destino reais.
Exemplos de componentes do sistema de design gluestack UI
app.jsx — estudo completo dos componentes do núcleo
Integração real dos criadores e modelo completo do estado da lista de verificação.
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/>);
Configuração do agente do sistema de design gluestack UI
Ponto de partida para implementação
Primeiro, salve os quatro arquivos completos. Esta configuração se limita ao subconjunto demonstrado para navegador e não inicializa NativeWind, Uniwind, Expo ou um registro de componentes gerado.
Implemente o estudo completo do kit de campo para navegador do gluestack core 5.0.15 usando createButton/createInput e hosts de React Native Web. Preserve IDs estáveis, texto de rascunho controlado, validação de espaços em branco e duplicatas, restauração do foco, contagem derivada de itens guardados, redefinição local e mapeamento explícito das funções claras da v5. Mantenha as decisões de layout original separadas dos padrões da biblioteca. Não afirme que houve testes em dispositivos móveis nativos nem persistência em um backend.
05
Fontes e escopo do sistema de design gluestack UI
Comportamento real de @gluestack-ui/core 5.0.15 por meio de React Native Web 0.21.3. O layout do kit de campo, as ilustrações e o modelo de estado são criações originais de OpenDesign. Este exemplo de navegador com criadores diretos usa estilos explícitos; não é o conjunto de componentes NativeWind/Uniwind gerado pela CLI e não foi testado no iOS ou Android.
