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 aoIgbInput componente. O seguinte deve 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

    Comprefix os slots de Ysuffix, podemos adicionar conteúdo diferente antes e depois do conteúdo principal da Entrada. No exemplo a seguir, criaremos um novo campo de entrada com um prefixo de texto e um sufixo de ícone:

    Helper Text

    Ohelper-text slot fornece uma dica colocada abaixo do Input. Vamos adicionar um texto de ajuda ao nosso telefone. Entrada:

    Input Sizing

    Podemos permitir que o usuário altere o tamanho doIgbInput usando a--ig-size variável CSS. Fazendo isso, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Assim, sempre que um for selecionado, mudaremos o tamanho da Entrada:

    No exemplo acima demonstramos o uso dos seguintes atributos:

    • required- Usado para marcar a entrada conforme necessário
    • disabled- Usado para desabilitar a entrada
    • readonly- Usado para marcar a entrada como somente leitura

    Styling

    OIgbInput componente expõe partes do CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

    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