React 텍스트 영역 개요

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

React 텍스트 영역 예제

종속성

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

npm install igniteui-react

You will then need to import the IgrTextarea and its necessary CSS like so:

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

With prefix and suffix slots we can add different content before and after the main content of the Text Area. The helper-text slot provides a hint placed below the Text Area. In the following sample we will create a new Text Area field with a text prefix, an icon suffix and a helper text as a hint:

Text Area Resizing

There are three different resize options of the IgrTextarea. When set to none, the text area does not resize and uses a scroll bar to show overflow text. When set to vertical (the default option), the text area lets the user resize it vertically. When set to auto, the text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically.

Form Integration

The sample below shows how a IgrTextarea could be integrated into a form.

스타일링

The IgrTextarea component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

이름	설명
`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);
}