Web Components 텍스트 영역 개요

    Ignite UI for Web Components 텍스트 영역은 여러 줄로 된 일반 텍스트 편집 컨트롤을 나타내며, 사용자가 상당한 양의 자유형 텍스트(예: 검토 또는 피드백 양식에 대한 주석)를 입력할 수 있도록 허용하려는 경우에 유용합니다.

    Web Components Text Area Example

    Dependencies

    시작하려면 typescript 파일에 를IgcTextareaComponent 가져오고, defineComponents() function을 호출하여 다음과 같이 컴포넌트를 등록해야 합니다:

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

defineComponents(IgcTextareaComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    컴포넌트를IgcTextareaComponent 가져오면 사용할 준비가 되었으니, 첫 번째 텍스트 영역을 추가하겠습니다.

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

    Prefix, Suffix & Helper Text

    슬롯prefix을 통해suffix 텍스트 영역의 주요 콘텐츠 전후에 다른 콘텐츠를 추가할 수 있습니다. 이 슬롯은helper-text 텍스트 영역 아래에 힌트를 제공합니다. 다음 샘플에서는 텍스트 접두사, 아이콘 접미사, 그리고 힌트로 보조 텍스트를 포함한 새로운 텍스트 영역 필드를 만들 것입니다:

    Text Area Resizing

    세 가지 크기별 옵션이IgcTextareaComponent 있습니다. 로none 설정하면 텍스트 영역이 크기 조정되지 않고 스크롤 바를 사용해 오버플로우 텍스트를 표시합니다. 기본 옵션으로 설정vertical 하면 텍스트 영역에서 사용자가 세로로 크기를 조절할 수 있습니다. 로auto 설정하면 텍스트 영역에 모든 사용자 입력이 한꺼번에 표시됩니다. 오버플로우 텍스트는 새 줄로 감싸서 텍스트 영역을 자동으로 확장합니다.

    텍스트 영역의 전체 속성 목록은 API에서IgcTextareaComponent 확인할 수 있습니다.

    Form Integration

    아래 샘플은 aIgcTextareaComponent를 어떻게 양식에 통합할 수 있는지 보여줍니다.

    Styling

    컴포넌트는IgcTextareaComponent 내부 요소의 거의 모든 CSS 파트를 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:

    이름 설명
    container 모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
    input 기본 입력 요소입니다.
    label 기본 레이블 요소입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼.
    helper-text 도우미 텍스트 래퍼입니다. 
    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