Visão geral da área de texto Blazor

    A Área de Texto Ignite UI for Blazor representa um controle de edição de texto sem formatação de várias linhas, útil quando você deseja permitir que os usuários insiram uma quantidade considerável de texto de formato livre, por exemplo, um comentário em um formulário de revisão ou comentários.

    Blazor Text Area Example

    Dependencies

    Para começar a usar o componente Área de texto, primeiro você precisa registrar seu módulo.

    // in Program.cs file

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

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

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

    <IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>

    Prefix, Suffix & Helper Text

    Com prefix e suffix slots podemos adicionar conteúdo diferente antes e depois do conteúdo principal da Área de Texto. O helper-text slot fornece uma dica colocada abaixo da área de texto. No exemplo a seguir, criaremos um novo campo Área de Texto com um prefixo de texto, um sufixo de ícone e um texto auxiliar como dica:

    Text Area Resizing

    Existem três opções diferentes de redimensionamento do IgbTextarea. Quando definido como none, a área de texto não é redimensionada e usa uma barra de rolagem para mostrar o texto excedente. Quando definida como vertical (a opção padrão), a área de texto permite que o usuário a redimensione verticalmente. Quando definida como auto, a área de texto mostra todas as entradas do usuário de uma só vez. O texto excedente é quebrado em uma nova linha e expande a área de texto automaticamente.

    Form Integration

    O exemplo abaixo mostra como um IgbTextarea pode ser integrado a um formulário.

    Styling

    O IgbTextarea componente expõe partes 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-textarea::part(input) {
  background-color: var(--ig-info-100);
  border-color: var(--ig-primary-400);
}

igc-textarea::part(label) {
  color: var(--ig-gray-800);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
  color: var(--ig-primary-500-contrast);
  border-color: var(--ig-primary-500);
  background-color: var(--ig-primary-500);
}

    API References

    Additional Resources