Widgets de UI

Introdução

Widgets de UI são controles personalizados que melhoram a visualização dos nossos campos HTML5 Padrão. Por exemplo, podemos usar o widget "International Telephone Input" para exibir um Dropdown com bandeiras e códigos de país como placeholders dinâmicos. Claro, podemos personalizá-los fazendo uso dos atributos personalizados do Construtor de Formulários.

Como usar um Widget de UI

Usar widgets de UI é bastante fácil, basta ir para Configurações do Formulário > Configurações de UI e selecionar o widget de UI que deseja usar no seu formulário.

Por exemplo, vamos selecionar o widget "International Telephone Input" e clicar em Salvar.

Vamos ver o resultado.

Tenha em mente que alguns widgets exigem adicionar uma Classe CSS ao seu Campo de Formulário. Para outros, como no nosso exemplo anterior, só precisamos ativá-los para exibí-los no formulário.

Como configurar um Widget de UI

Para configurar o Widget de UI que queremos usar, precisamos ir para o Construtor de Formulários > Configurações de Campo > Atributos Personalizados.

Em nosso exemplo, o International Telephone Input exibe a bandeira do país do Usuário. Para este exemplo, vamos personalizar esse comportamento para exibir a bandeira da Grã-Bretanha. Para isso, vamos adicionar o seguinte atributo personalizado:

• Atributo: data-initial-country
• Valor: gb

E, Salve tudo.

Vamos ver o resultado.

Atributos Personalizados para Widgets de UI

Agora vamos listar todos os atributos que podemos usar para configurar os Widgets de UI.

Flatpickr

Substitui qualquer campo de Data por um datepicker leve e compatível com vários navegadores.

• data-alt-format: Uma string de caracteres usada para definir como a data será exibida na caixa de entrada. Por exemplo: F j, Y
• data-allow-invalid-preload: Permite o pré-carregamento de uma data inválida. Pode ser true ou false.
• data-aria-date-format: Define como a data será formatada no aria-label para os dias do calendário. Por exemplo: F j, Y
• data-default-date: Define a data inicial selecionada no formato HTML5 (aaaa-mm-dd). Por exemplo: 2021-12-31
• data-default-hour: Valor inicial do elemento hora. Por exemplo: 12
• data-default-minute: Valor inicial do elemento minuto. Por exemplo: 0
• data-disable: Datas separadas por vírgulas no formato HTML5. Por exemplo: 2022-01-01,2022-01-02,2022-01-03
• data-disable-mobile: Defina como true para sempre usar o datepicker não nativo. Pode ser true ou false.
• data-enable-time: Habilita o seletor de hora. Pode ser true ou false.
• data-enable-seconds: Habilita os segundos no seletor de hora. Pode ser true ou false.
• data-hour-increment: Ajusta o passo para a entrada de hora (incluindo rolagem). Por exemplo: 1
• data-inline: Exibe o calendário inline. Pode ser true ou false.
• data-max-date: A data máxima que um usuário pode selecionar (inclusiva). Por exemplo: 2021-12-31
• data-min-date: A data mínima que um usuário pode começar a selecionar (inclusiva). Por exemplo: 2021-12-01
• data-minute-increment: Ajusta o passo para a entrada de minuto (incluindo rolagem). Por exemplo: 5
• data-mode: "single", "multiple" ou "range". Campos de Data são compatíveis apenas com o modo "single", mas você pode usar os outros com Campos de Texto.
• data-next-arrow: HTML para o ícone de seta, usado para trocar os meses. Por exemplo: >
• data-no-calendar: Esconde a seleção de dia no calendário. Use junto com "data-enable-time" para criar um seletor de hora. Isso não é compatível com um Campo de Data, mas você pode usá-lo com Campos de Texto.
• data-position: Onde o calendário é renderizado em relação à entrada, vertical e horizontalmente no formato de "[vertical] [horizontal]". O vertical pode ser auto, acima ou abaixo (obrigatório). O horizontal pode ser left, center ou right. Por exemplo: "above" ou "auto center"
• data-prev-arrow: HTML para o ícone de seta esquerda. Por exemplo: <
• data-shorthand-current-month: Mostrar o mês usando a versão abreviada (por exemplo, Set em vez de Setembro). Pode ser true ou false.
• data-show-months: O número de meses a serem exibidos ao mesmo tempo ao exibir o calendário. Por exemplo: 1
• data-time-24hr: Exibe o seletor de hora no modo 24 horas sem seleção AM/PM quando ativado. Pode ser true ou false.
• data-week-numbers: Habilita a exibição de números de semana no calendário.
• data-first-day: Define o primeiro dia da semana: Domingo é 0, Segunda é 1, etc.

International Telephone Input ¶

Adiciona um dropdown de bandeira a campos de Telefone e exibe um placeholder relevante. O usuário digita seu número nacional e o plugin envia o número internacional padrão completo.

• data-initial-country: Pode ser "auto" ou um código de país de duas letras, por exemplo: "us", "gb" ou "it".

jQuery Mask

Adicione máscaras em campos de formulário e elementos HTML.

• data-mask: Para aplicar sua máscara com o atributo data-mask, basta usá-lo. Por exemplo: 00/00/0000
• data-mask-placeholder: Para adicionar um placeholder à sua máscara. Por exemplo: "//____"
• data-mask-reverse: Ativa uma máscara reversível. Pode ser true ou false.
• data-mask-clearifnotmatch: Limpa o campo se não corresponder. Pode ser true ou false.
• data-mask-selectonfocus: Seleciona a máscara ao focar. Pode ser true ou false.

Valores comuns que você pode adicionar ao atributo personalizado "data-mask":

• Data: 00/00/0000
• Hora: 00:00:00
• DataHora: 00/00/0000 00:00:00
• CEP: 00000-000
• Telefone: 0000-0000
• Telefone com DDD: (00) 0000-0000
• Telefone dos EUA: (000) 000-0000
• Misto: AAA 000-S0S
• Endereço IP: 099.099.099.099
• Apenas Números: 0#

jQuery Ui Datepicker

Selecione uma data a partir de um calendário popup ou inline em qualquer campo 'date'.

• data-date-format: O formato para datas analisadas e exibidas. Por exemplo: mm/dd/yy
• data-show-button-panel: Se deve exibir um painel de botões abaixo do calendário. Pode ser true ou false.
• data-change-month: Se o mês deve ser renderizado como um dropdown em vez de texto. Pode ser true ou false.
• data-change-year: Se o ano deve ser renderizado como um dropdown em vez de texto. Pode ser true ou false.
• data-year-range: O intervalo de anos exibidos no dropdown de ano. Por exemplo: 2019:2022
• data-number-of-months: O número de meses a serem mostrados de uma vez. Por exemplo: 1
• data-min-date: A data mínima selecionável. Por exemplo, "+1m +7d" representa um mês e sete dias a partir de hoje
• data-max-date: A data máxima selecionável. Por exemplo, "+1m +7d" representa um mês e sete dias a partir de hoje.
• data-is-rtl: Se a linguagem atual deve ser desenhada da direita para a esquerda. Pode ser true ou false.
• data-show-week: Quando true, uma coluna é adicionada para mostrar a semana do ano. Pode ser true ou false.
• data-first-day: Define o primeiro dia da semana: Domingo é 0, Segunda é 1, etc.

Krajee File Input

Adicione a classe CSS "file" ao campo de arquivo para aprimorar a entrada de arquivo HTML5.

• data-browse-label: O rótulo a ser exibido para o botão de seleção de arquivo/browse. Padrão para Browse...
• data-browse-icon: O ícone a ser exibido antes do rótulo para o botão de seleção de arquivo/browse. Padrão para
• data-remove-label: O rótulo a ser exibido para o botão de remover arquivo. Padrão para Remove.
• data-remove-icon: O ícone a ser exibido antes do rótulo para o botão de remover arquivo. Padrão para  .
• data-cancel-label: O rótulo a ser exibido para o botão de cancelar upload de arquivo. Padrão para Cancel.
• data-cancel-icon: O ícone a ser exibido antes do rótulo para o botão de cancelar upload de arquivo. Padrão para  .
• data-upload-label: O rótulo a ser exibido para o botão de upload de arquivo. Padrão para Upload.
• data-upload-icon: O ícone a ser exibido antes do rótulo para o botão de upload de arquivo. Padrão para  .
• data-show-preview: Se deve exibir a pré-visualização do arquivo. Pode ser true ou false. Padrão para true.
• data-show-browse: Se deve exibir o botão de seleção de arquivo. Pode ser true ou false. Padrão para true.
• data-show-remove: Se deve exibir o botão de remover/limpar arquivo. Pode ser true ou false. Padrão para true.
• data-show-upload: Se deve exibir o botão de upload de arquivo. Pode ser true ou false. Padrão para true.

Krajee Star Rating

Exiba um widget de Avaliação por Estrelas em qualquer campo com a classe CSS .rating. Além disso, podemos usar um tema personalizado com as seguintes classes CSS:

• .rating-theme-fas: Tema Font Awesome 5.x
• .rating-theme-uni: Tema Unicode
• .rating-theme-gly: Tema Glyphicons

Podemos personalizar este widget usando os seguintes atributos personalizados:

• data-container-class: A classe CSS a ser adicionada ao contêiner de avaliação por estrelas. Isso é útil se você quiser prefixar alguma classe CSS ao contêiner e sobrescrever o estilo do widget do plugin para seu caso de uso.
• data-empty-star: O markup do símbolo a ser exibido para uma estrela vazia. Padrão para:
• data-filled-star: O markup do símbolo a ser exibido para uma estrela preenchida/destaque. Padrão para:
• data-stars: O número de estrelas a serem exibidas. Padrão para 5.
• data-min: O valor mínimo para a entrada de avaliação. Padrão para 0.
• data-max: O valor máximo para a entrada de avaliação. Padrão para 5.
• data-step: O passo para incrementar a avaliação quando cada estrela é clicada. Padrão para 0.5.
• data-rtl: Se a entrada de avaliação deve ser orientada da DIREITA PARA A ESQUERDA. Pode ser true ou false. Padrão para false.
• data-show-caption: Se a legenda de avaliação deve ser exibida. Pode ser true ou false. Padrão para true.
• data-size: Tamanho do controle de avaliação. Um dos xl, lg, md, sm ou xs. Padrão para md.
• data-default-caption: O texto da legenda padrão, que será exibido quando nenhuma legenda for configurada para a avaliação. Padrão para {rating} Estrelas.
• data-star-caption: O texto da legenda correspondente a uma estrela. Padrão para Uma estrela.
• data-star-captions: O texto da legenda correspondente a múltiplas estrelas. Padrão para {rating} estrelas.
• data-clear-button: O markup para exibir o botão de limpar. Padrão para
• data-clear-button-title: O título exibido ao passar o mouse sobre o botão de limpar. Padrão para Limpar.
• data-clear-caption: A legenda exibida quando o botão de limpar é clicado. Padrão para Não Avaliado.

Select2

Exiba um widget Select2 em um campo de Lista de Seleção com a classe CSS .select2.

Podemos personalizar este widget usando os seguintes atributos personalizados:

• data-theme: O tema a ser usado pelo widget. Pode ser classic ou bootstrap. Padrão para bootstrap.
• data-placeholder: O placeholder a ser exibido quando nenhuma opção está selecionada. Por exemplo: "Selecione um país".
• data-allow-clear: Permite que o usuário limpe a seleção atual. Deve ser usado com "data-placeholder" para funcionar. Pode ser true ou false.
• data-tags: Permite que o usuário crie novas opções a partir da entrada de texto no campo de busca. Pode ser true ou false.
• data-maximum-selection-length: Por exemplo: 2
• data-minimum-input-length: Inicia a busca quando o usuário tiver digitado um número de caracteres. Por exemplo: 3
• data-maximum-input-length: Permite limitar o comprimento do termo de busca de forma que não exceda um determinado comprimento. Por exemplo: 20
• data-minimum-results-for-search: Permite esconder o campo de busca dependendo do número de resultados. Por exemplo: 3.

Select2

Exiba um widget Select2 em um campo de Lista de Seleção com a classe CSS .select2.

Podemos personalizar este widget usando os seguintes atributos personalizados:

• data-theme: O tema a ser usado pelo widget. Pode ser classic ou bootstrap. Padrão para bootstrap.
• data-placeholder: O placeholder a ser exibido quando nenhuma opção está selecionada. Por exemplo: "Selecione um país".
• data-allow-clear: Permite que o usuário limpe a seleção atual. Deve ser usado com "data-placeholder" para funcionar. Pode ser true ou false.
• data-tags: Permite que o usuário crie novas opções a partir da entrada de texto no campo de busca. Pode ser true ou false.
• data-maximum-selection-length: Por exemplo: 2
• data-minimum-input-length: Inicia a busca quando o usuário tiver digitado um número de caracteres. Por exemplo: 3
• data-maximum-input-length: Permite limitar o comprimento do termo de busca de forma que não exceda um determinado comprimento. Por exemplo: 20
• data-minimum-results-for-search: Permite esconder o campo de busca dependendo do número de resultados. Por exemplo: 3.