Visão geral da área de texto Web Components

    A Área de Texto Ignite UI for Web Components 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.

    Web Components Text Area Example

    Dependencies

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

    Para começar, precisamos importar o IgcTextareaComponent em nosso arquivo typescript e registrar o componente chamando a função defineComponents() da seguinte maneira:

    import { defineComponents, IgcTextareaComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTextareaComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    Depois de importarmos o IgcTextareaComponent componente, estamos prontos para começar a usá-lo, então vamos adicionar nossa primeira área de texto.

    <igc-textarea rows="5" label="Tell us your story:">It was a dark and stormy night...</igc-textarea>

    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 IgcTextareaComponent. 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.

    A lista completa de atributos da área de texto pode ser encontrada na IgcTextareaComponent API.

    Form Integration

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

    Styling

    O IgcTextareaComponent 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