Vuido permite a criação de aplicações desktop nativas utilizando Vue.js. Seus componentes de formulário oferecem uma gama rica e intuitiva de elementos de interface para a interação do usuário. Este guia detalha o uso de 10 controles essenciais em Vuido, facilitando o desenvolvimento de formulários em aplicações desktop para iniciantes.

Estrutura Básica de Formulárioss

O sistema de formulários Vuido é centrado no componente <Form>, que atua como um contêiner principal. Ele organiza automaticamente os elementos filhos em uma disposição vertical e adiciona rótulos a cada controle. A propriedade padded pode ser ativada para introduzir espaçamento interno, resultando em um layout de formulário mais agradável.

<Form padded>
 <!-- Os controles do formulário serão organizados verticalmente aqui -->
</Form>

Cada elemento filho dentro do formulário pode ter seu texto de rótulo definido através da propriedade label. A propriedade stretchy controla se o controle deve expandir-se para preencher o espaço disponível. Este sistema de layout flexível simplifica e torna intuitivo o design de formulários.

Análise Completa dos Controles Essenciais

1. Botão (Button): Ponto de Gatilho de Interação

O botão é o controle de interação mais fundamental, respondendo às ações do usuário através do evento click. Botões Vuido suportam conteúdo textual e um callback de clique, sendo elementos centrais para submissão de formulários e acionamento de ações.

<Button @click="submitForm">Enviar</Button>

2. Caixa de Seleção (Checkbox): Escolha de Múltiplas Opções

Ideal para cenários de seleção múltipla, a caixa de seleção suporta a ligação de dados bidirecional com v-model e rastreia muddanças de estado com o evento toggle.

<Checkbox v-model="agreeTerms">Eu concordo com os termos de serviço</Checkbox>

3. Campo de Texto (TextInput): Coleta Básica de Texto

Este controle de entrada de texto de linha única suporta ligação com v-model e é adequado para coletar informações textuais curtas como nomes e e-mails.

<TextInput label="Endereço de E-mail:" v-model="userEmail"/>

4. Área de Texto (TextArea): Entrada de Texto Multilinha

Para coletar textos mais longos, a área de texto oferece uma caixa de entrada multilinha com rolagem, suporte a quebra de linha automática e ajuste de tamanho.

<TextArea label="Descrição Detalhada:" v-model="description" stretchy/>

5. Lista Suspensa (DropdownList): Seleção em Lista Suspensa

A lista suspensa apresenta uma interface compacta para seleção única. As opções são definidas pela propriedade items, e o valor selecionado é obtido com v-model.

<DropdownList label="País:" v-model="country" :items="countryList"/>

6. Caixa Combinada (ComboBox): Seleção Suspensa com Entrada de Texto

A caixa combinada une as funcionalidades de entrada de texto e seleção suspensa. O usuário pode digitar diretamente ou escolher uma opção predefinida da lista.

<ComboBox label="Profissão:" v-model="profession" :items="professionOptions"/>

7. Botões de Rádio (RadioButtons): Seleção Exclusiva de Opções

Quando uma única escolha é necessária entre várias opções mutuamente exclusivas, os botões de rádio fornecem feedback visual claro, garantindo que apenas uma opção seja selecionada.

<RadioButtons label="Gênero:" v-model="gender" :items="genderOptions"/>

8. Seletor de Data (DatePicker): Controle de Seleção de Data

Apresenta uma interface intuitiva para seleção de datas, permitindo navegação pelo calendário ou entrada direta, retornando a data em um formato padronizado.

<DatePicker label="Data de Nascimento:" v-model="birthDate"/>

9. Controle Deslizante (Slider): Seleção de Valor em Faixa

Permite a seleção de um valor numérico dentro de um intervalo especificado através do arrasto de um controle deslizante. É adequado para cenários como ajuste de volume ou brilho.

<Slider label="Volume:" v-model="volume" :min="0" :max="100"/>

10. Caixa de Incremento/Decremento (SpinBox): Entrada Numérica Precisa

Combina entrada de texto com botões de incremento/decremento. Permite a digitação direta ou o ajuste numérico por cliques, sendo ideal para cenários que exigem valores precisos.

<SpinBox label="Quantidade:" v-model="quantity" :min="1" :max="10"/>

Dicas Práticas para Formulários

Melhores Práticas de Ligação de Estado

Todos os controles de formulário Vuido suportam a diretiva v-model do Vue.js para ligação de dados bidirecional. Recomenda-se gerenciar os dados do formulário de forma centralizada na opção data do componente para facilitar o procesasmento e a validação unificados.

data() {
 return {
   formData: {
     username: '',
     email: '',
     agreeTerms: false
   }
 };
}

Estratégias de Validação de Formulários

Embora Vuido não forneça validação de formulários nativamente, a lógica de validação personalizada pode ser implementada utilizando propriedades computadas e métodos do Vue.js.

computed: {
 isFormValid() {
   return this.formData.email.includes('@') && this.formData.agreeTerms;
 }
}

Layouts de Formulários Complexos

Componentes de contêiner Vuido, como <Box> e <Group>, podem ser usados para construir layouts de formulário complexos. A propriedade horizontal pode ser utilizada para criar grupos de controles organizados horizontalmente.

<Box horizontal padded>
 <TextInput label="Sobrenome:" v-model="lastName" stretchy/>
 <TextInput label="Nome:" v-model="firstName" stretchy/>
</Box>

Recursos para Começar

Para começar a usar os componentes de formulário Vuido, clone o repositório do projeto:

git clone https://gitcode.com/gh_mirrors/vu/vuido

A documentação completa dos componentes de formulário pode ser encontrada em docs/built-in-components/containers/form.md no projeto. O arquivo example/MainWindow.vue contém exemplos de implementação em aplicações reais.

Com os 10 controles de formulário essenciais apresentados, você está equipado para construir formulários funcionais e com boa interação em suas aplicações desktop. Vuido combina a eficiência de desenvolvimento do Vue.js com o desempenho de aplicações nativas, oferecendo uma nova abordagem para o desenvolvimento desktop.