Web Components 텍스트 영역 개요

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

Web Components Text Area Example

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

defineComponents(IgcTextareaComponent);

export class TextareaOverview {
    constructor() {}
}

new TextareaOverview();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Overview</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea rows="3" label="Tell us your story:">It was a dark and stormy night...</igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Dependencies

텍스트 영역 구성 요소를 시작하려면 먼저 해당 모듈을 등록해야 합니다.

시작하려면 typescript 파일에 를 가져오 IgcTextareaComponent 고 다음과 같이 defineComponents() 함수를 호출하여 구성 요소를 등록해야 합니다.

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

defineComponents(IgcTextareaComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

구성 요소를 가져온 IgcTextareaComponent 후에는 사용할 준비가 되었으므로 첫 번째 텍스트 영역을 추가해 보겠습니다.

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

Prefix, Suffix & Helper Text

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

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

defineComponents(IgcIconComponent, IgcTextareaComponent);

export class TextareaSlots {
    constructor() {
        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>`
        );
    }
}

new TextareaSlots();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Slots</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Your feedback">
                    <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
                    <p slot="helper-text">Give us a short description of what you liked/disliked</p>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

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

Text Area Resizing

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

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

defineComponents(IgcTextareaComponent);

export class TextareaResize {
    constructor() {}
}

new TextareaResize();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Resize</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Resize: none" resize="none">
                    <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
                </igc-textarea>
                <igc-textarea label="Resize: vertical (default)">
                    <p slot="helper-text">This textarea lets the user resize vertically.</p>
                </igc-textarea>
                <igc-textarea 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>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

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

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

Form Integration

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

import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent);

export class TextareaFormIntegration {
    constructor() {
        const toast = document.querySelector("#submitted") as IgcToastComponent;
        const form = document.querySelector("#form") as HTMLFormElement;

        form.addEventListener("submit", (e: SubmitEvent) => {
            e.preventDefault();
            toast.show();
        });
    }
}

new TextareaFormIntegration();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Form Integration</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <form id="form">
                    <igc-textarea rows="3" name="user_feedback" label="Your review" required></igc-textarea>
                    <div class="controls">
                        <igc-button type="submit">Submit review</igc-button>
                        <igc-button type="reset" variant="outlined">Reset</igc-button>
                    </div>
                    <igc-toast id="submitted" position="top" display-time="1e3">Your review was submitted</igc-toast>
                </form>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

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

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);
}
css

import { defineComponents, IgcIconComponent, IgcTextareaComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./textarea.css";

defineComponents(IgcIconComponent, IgcTextareaComponent);

export class TextareaStyling {
    constructor() {
        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>`
        );
    }
}

new TextareaStyling();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Styling</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Steps to reproduce">
                    <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
                    <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

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

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