React 텍스트 영역 개요

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

    React Text Area Example

    Dependencies

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음 다음과 같이 필요한 CSS를 가져오IgrTextarea 면 됩니다:

    import { IgrTextarea } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    Prefix, Suffix & Helper Text

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

    Text Area Resizing

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

    Form Integration

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

    Styling

    컴포넌트는IgrTextarea 내부 요소의 거의 모든 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