React 텍스트 영역 개요

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

React 텍스트 영역 예제

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTextarea } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function TextAreaOverview() {

    return (
        <div className="sample">
            <IgrTextarea rows={3} label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
        </div>
    );
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TextAreaOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

종속성

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 필요한 CSS를 가져와야 합니다. IgrTextarea​

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

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

접두사, 접미사 & 도우미 텍스트

및 suffix 슬롯을 사용하면 prefix 텍스트 영역의 기본 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다. 슬롯은 helper-text 텍스트 영역 아래에 배치된 힌트를 제공합니다. 다음 샘플에서는 텍스트 접두사, 아이콘 접미사 및 도우미 텍스트를 힌트로 사용하여 새 텍스트 영역 필드를 만듭니다.

EXAMPLE

TSX

CSS

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTextarea, IgrIcon, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function TextAreaSlots() {

    useEffect(() => {
        registerIconFromText( "feedback",
            `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
            "material");
    }, []);

    return (
        <div className="sample">
            <IgrTextarea label="Your feedback">
                <span slot="prefix">
                <IgrIcon name='feedback' collection="material"></IgrIcon>
                </span>                    
                <p slot="helper-text">Give us a short description of what you liked/disliked</p>
            </IgrTextarea>
        </div>
    );
}


// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TextAreaSlots/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

텍스트 영역 크기 조정

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTextarea } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function TextAreaResize() {

    return (
        <div className="sample">
           <IgrTextarea label="Resize: none" resize="none">                                      
                <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
            </IgrTextarea>
            <IgrTextarea label="Resize: vertical (default)">                                    
                <p slot="helper-text">This textarea lets the user resize vertically.</p>
            </IgrTextarea>
            <IgrTextarea label="Resize: auto" resize="auto">                                       
                <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
            </IgrTextarea>
        </div>
    );
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TextAreaResize/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

양식 통합

아래 샘플은 a를 IgrTextarea 양식에 통합하는 방법을 보여줍니다.

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTextarea, IgrButton, IgrToast } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default function TextAreaFormIntegration() {
  let toastRef: IgrToast;

  const onToastRef = (toast: IgrToast) => {
    if (!toast) {
      return;
    }
    toastRef = toast;
  };

  const onSubmitButtonClicked = (e: React.FormEvent<HTMLFormElement>) => {
    if (toastRef) {
      e.preventDefault();
      toastRef.show();
    }
  };

  return (
    <div className="sample">
      <form id="form" onSubmit={onSubmitButtonClicked}>
        <IgrTextarea
          rows={3}
          name="user_feedback"
          label="Your review"
          required
        ></IgrTextarea>
        <div className="controls">
          <IgrButton type="submit">
            <span>Submit review</span>
          </IgrButton>
          <IgrButton type="reset" variant="outlined">
            <span>Reset</span>
          </IgrButton>
        </div>
        <IgrToast
          id="submitted"
          position="top"
          displayTime={1000}
          ref={onToastRef}
        >
          <span>Your review was submitted</span>
        </IgrToast>
      </form>
    </div>
  );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TextAreaFormIntegration />);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.controls {
    margin-top: 1rem;
}
cssコピー

Edit in: Codesandbox

스타일링

구성 요소는 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);
}
css

EXAMPLE

TSX

CSS

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTextarea, IgrIcon, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function TextAreaStyling() {

    useEffect(() => {
        registerIconFromText( "feedback",
            `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
            "material");
    }, []);
    
    return (
        <div className="sample">
            <IgrTextarea label="Steps to reproduce">
                <span slot="prefix">
                <IgrIcon name='feedback' collection="material"></IgrIcon>
                </span>                    
                <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
            </IgrTextarea>
        </div>
    );
}


// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TextAreaStyling/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-textarea::part(input) {
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

igc-textarea::part(label) {
    color: rgb(1, 42, 74);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
    color: white;
    border-color: rgb(42, 111, 151);
    background-color: rgb(70, 143, 175);
}
cssコピー

Edit in: Codesandbox

API 참조

• IgrIcon
• IgrTextarea
• IgrToast
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub