Web Components Text Area (テキストエリア) の概要

Ignite UI for Web Components テキストエリアは、複数行のプレーンテキスト編集コントロールを表します。レビューフォームやフィードバックフォームへのコメントなど、ユーザーがかなりの量の自由形式のテキストを入力できるようにする場合に便利です。

Web Components テキストエリアの例

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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

依存関係

テキストエリアコンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。

開始するには、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 コンポーネントをインポートしたら、使用を開始する準備ができているので、最初の Text Area を追加しましょう。

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

プレフィックス、サフィックス、ヘルパーテキスト

prefix スロットと suffix スロットを使用すると、テキストエリアのメインコンテンツの前後に異なるコンテンツを追加できます。helper-text スロットは、テキストエリアの下に配置されたヒントを提供します。次のサンプルでは、テキストプレフィックス、アイコンサフィックス、およびヒントとしてヘルパーテキストを含む新しいテキストエリアフィールドを作成します。

テキストエリアのサイズ変更

IgcTextareaComponent には 3 つの異なるサイズ変更オプションがあります。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

テキストエリアの属性の完全なリストは IgcTextareaComponent API にあります。

フォームの統合

以下のサンプルは、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

スタイル設定

IgcTextareaComponent コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:

名前	説明
`container`	すべての主要な入力要素を保持するメインラッパー。
`input`	ネイティブ input 要素。
`label`	ネイティブ 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

Web Components Text Area (テキストエリア) の概要

Web Components テキストエリアの例

依存関係

プレフィックス、サフィックス、ヘルパーテキスト

テキストエリアのサイズ変更

フォームの統合

スタイル設定

API リファレンス

その他のリソース

Web Components Text Area (テキスト エリア) の概要

Web Components テキスト エリアの例

依存関係

プレフィックス、サフィックス、ヘルパー テキスト

テキスト エリアのサイズ変更

フォームの統合

スタイル設定

API リファレンス

その他のリソース

Web Components Text Area (テキストエリア) の概要

Web Components テキストエリアの例

プレフィックス、サフィックス、ヘルパーテキスト

テキストエリアのサイズ変更