React Input (入力) の概要

    Ignite UI for React Input は、ユーザーがデータを入力できるコンポーネントです。

    React Input の例

    EXAMPLE
    TSX
    CSS

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

    まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

    npm install igniteui-react
    cmd

    次に、以下のように、IgrInput とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

    import { IgrInputModule, IgrInput } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrInputModule.register();
    tsx
    <IgrInput type="email" label="Subscribe"></IgrInput>
    tsx

    Prefix と Suffix

    prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。次のサンプルでは、テキスト プレフィックスとアイコン サフィックスを使用して新しい Input フィールドを作成します:

    EXAMPLE
    TSX
    CSS

    Ignite UI for React | CTA Banner

    ヘルパー テキスト

    helper-text スロットは、入力の下に配置されたヒントを提供します。Phone Input にヘルパー テキストを追加しましょう:

    EXAMPLE
    TSX
    CSS

    Input のサイズ設定

    ユーザーが --ig-size CSS 変数を使用して IgrInput のサイズを変更できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびに、Input のサイズを変更します。

    EXAMPLE
    TSX
    index.css
    InputSizeStyling.css

    上記のサンプルでは、次の属性の使用法を示しています:

    • required - 入力を必須としてマークするために使用されます。
    • disabled - 入力を無効にするために使用されます。
    • readonly - 入力を読み取り専用としてマークするために使用されます。

    スタイル設定

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

    説明
    container すべての主要な入力要素を保持するメイン ラッパー。
    input ネイティブ入力要素。
    label ネイティブ ラベル要素。
    prefix プレフィックス ラッパー。
    suffix サフィックス ラッパー。
    helper-text ヘルパー テキスト ラッパー。
    igc-input::part(input) {
        background-color: rgb(169, 214, 229);
        border-color: rgb(42, 111, 151);
    }
    
    igc-input::part(label) {
        color: rgb(1, 42, 74);
    }
    
    igc-input::part(prefix),
    igc-input::part(suffix) {
        color: white;
        border-color: rgb(42, 111, 151);
        background-color: rgb(70, 143, 175);
    }
    scss

    EXAMPLE
    TSX
    index.css
    InputStyling.css

    API リファレンス

    その他のリソース