input

📥 UI Theme Input Module

Olá, neste módulo podemos encontrar a representação de um input.

Types

UIInput

Dados do input.

id: O identificador único do input.
type_: O tipo de input.

pub type UIInput {
  UIInput(
    id: String,
    type_: UIInputType,
    value: option.Option(String),
    name: option.Option(String),
    required: option.Option(Bool),
  )
}

Constructors

UIInput(
  id: String,
  type_: UIInputType,
  value: option.Option(String),
  name: option.Option(String),
  required: option.Option(Bool),
)

UIInputType

</>

O tipo de componente de input queremos representar

Inputs removidos e motivos:

❌ InputButton (Use button.gleam) ❌ InputSubmit (Use button.gleam com button.Submit) ❌ InputImage (Obsoleto, use button com imagem dentro) ❌ InputHidden (Se você precisa de um dado oculto, você apenas guarda no Model). Não faz sentido tematizar um campo oculto.

pub type UIInputType {
  Tel
  Email
  Text
  Password
  Checkbox
  Radio
  Url
  Color
  Range
  Number
  Date
  Time
  Week
  Month
  DateTimeLocal
  Search
  File
}

Constructors

```
Tel
```
Um controle para inserir um número de telefone. Exibe um teclado telefônico em alguns dispositivos com teclados dinâmicos.
```
Email
```
Um campo para editar um endereço de e-mail. Parece um campo de entrada de texto, mas possui parâmetros de validação e teclado compatível em navegadores e dispositivos com teclados dinâmicos.
```
Text
```
O valor padrão. Um campo de texto de linha única. As quebras de linha são removidas automaticamente do valor de entrada.
```
Password
```
Um campo de texto de linha única cujo valor está oculto. Alertará o usuário se o site não for seguro.
```
Checkbox
```
❌ InputCheckbox (Use checkbox.gleam focado em Bool)
```
Radio
```
❌ InputRadio (Use radio.gleam focado em Bool/Enums)
```
Url
```
Um campo para inserir um URL. Parece um campo de entrada de texto, mas possui parâmetros de validação e teclado compatível em navegadores e dispositivos com teclados dinâmicos.
```
Color
```
Um controle para especificar uma cor; abre um seletor de cores quando ativo em navegadores compatíveis.
```
Range
```
Um controle para inserir um número cujo valor exato não é importante. Exibe-se como um widget de intervalo, com o valor médio como padrão. Usado em conjunto com os controles min e max para definir o intervalo de valores aceitáveis. TODO: Range merecesse um slider customizado no futuro!
```
Number
```
Um controle para inserir um número. Exibe um indicador de seleção e adiciona validação padrão. Exibe um teclado numérico em alguns dispositivos com teclados dinâmicos.
```
Date
```
Um controle para inserir uma data (ano, mês e dia, sem hora). Abre um seletor de datas ou listas numéricas para ano, mês e dia quando ativo em navegadores compatíveis.
```
Time
```
Um controle para inserir um valor de tempo sem fuso horário.
```
Week
```
Um controle para inserir uma data composta por um número de semana-ano e um número de semana, sem fuso horário.
```
Month
```
Um campo para inserir o mês e o ano, sem fuso horário.
```
DateTimeLocal
```
Um controle para inserir data e hora, sem fuso horário. Abre um seletor de data ou listas numéricas para componentes de data e hora quando ativo em navegadores compatíveis.
```
Search
```
Um campo de texto de linha única para inserir termos de pesquisa. As quebras de linha são removidas automaticamente do valor de entrada. Pode incluir um ícone de exclusão em navegadores compatíveis, que pode ser usado para limpar o campo. Exibe um ícone de pesquisa em vez da tecla Enter em alguns dispositivos com teclados dinâmicos.
```
File
```
Controle para inserir arquivos.

Values

new

</>

pub fn new(id: String) -> UIInput

Criar novo input com id e tipo de texto (padrão).

id: O identificador único do input.

view

</>

pub fn view(
  input: UIInput,
  theme: theme.UITheme(lustre.UILustre),
  with attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

Converte a representação de um input em um elemento lustre.

id: Identificação do elemento input.
type_: Tipo do elemento input.
attributes: Atributos adicionais ao elemento input.

with_name

</>

pub fn with_name(input: UIInput, name: String) -> UIInput

Altera o nome do input.

with_type

</>

pub fn with_type(input: UIInput, type_: UIInputType) -> UIInput

Altera o tipo de input.

with_value

</>

pub fn with_value(input: UIInput, value: String) -> UIInput

Altera o valor do input.

without_value

</>

pub fn without_value(input: UIInput) -> UIInput

Altera o valor para intocado, usado para limpar dados dos formulários.