Visão geral da entrada Blazor

    A Ignite UI for Blazor Input é um componente onde o usuário pode inserir dados.

    Blazor Input Example

    Dependencies

    Para começar a usar o componente Input, primeiro você precisa registrar seu módulo.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbInput. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbInput DisplayType="@InputType.Email" Label="Subscribe" Placeholder="john.doe@mail.com" />

    Prefix & Suffix

    Com slots prefix e suffix, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do Input. No exemplo a seguir, criaremos um novo campo Input com um prefixo de texto e um sufixo de ícone:

    Helper Text

    O slot helper-text fornece uma dica colocada abaixo do Input. Vamos adicionar algum texto auxiliar ao nosso Input de telefone:

    Input Sizing

    Podemos permitir que o usuário altere o tamanho do IgbInput usando a variável CSS--ig-size. Ao fazer isso, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho do Input:

    No exemplo acima demonstramos o uso dos seguintes atributos:

    • required- Usado para marcar a entrada como obrigatória
    • disabled- Usado para desabilitar a entrada
    • readonly- Usado para marcar a entrada como somente leitura

    Styling

    The IgbInput component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    Nome Descrição
    container O wrapper principal que contém todos os principais elementos de entrada.
    input O elemento de entrada nativo.
    label O elemento de rótulo nativo.
    prefix O wrapper de prefixo.
    suffix O wrapper de sufixo.
    helper-text O wrapper de texto auxiliar. 
    igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

    API References

    Additional Resources