Web Components Input (入力) の概要

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

Web Components Input の例

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

defineComponents(IgcInputComponent);
export class InputOverview {
    constructor() {
    }
}

new InputOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input 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-input type="email" label="Subscribe" placeholder="john.doe@mail.com">
          <span slot="prefix">Email</span>
        </igc-input>
      </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 ファイルに IgcInputComponent をインポートし、次のように defineComponents() 関数を呼び出してコンポーネントを登録する必要があります。

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

defineComponents(IgcInputComponent);
ts

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcInputComponent コンポーネントをインポートしたら、使用を開始する準備ができているので、最初の Input を追加しましょう。

<igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>
html

Prefix と Suffix

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

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

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputPrefixSuffix {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputPrefixSuffix();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Prefix & Suffix</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-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </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

ヘルパーテキスト

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

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

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputHelperText {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputHelperText();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Helper Text</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-input type="tel" label="Phone">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
          <span slot="helper-text">Ex.: +359 888 123 456</span>
        </igc-input>
      </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

Input のサイズ設定

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

import { defineComponents, IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputSizingStyle.css';

defineComponents(IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent);
const phoneIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputSize {
    radioGroup: IgcRadioGroupComponent;
    inputRequired: IgcInputComponent;
    inputDisabled: IgcInputComponent;
    inputReadonly: IgcInputComponent;

    constructor() {
        this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
        this.inputRequired = document.getElementById('input-required') as IgcInputComponent;
        this.inputDisabled = document.getElementById('input-disabled') as IgcInputComponent;
        this.inputReadonly = document.getElementById('input-readonly') as IgcInputComponent;
        registerIconFromText("phone", phoneIcon);

        this.radioGroup.addEventListener('click', (radio: any) => {
            this.inputRequired.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputDisabled.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputReadonly.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        });
    }
}

new InputSize();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Size</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-radio-group id="radio-group" alignment="horizontal">
          <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
          <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
          <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
        </igc-radio-group>

        <igc-input id="input-required" type="text" label="Required" value="This input is required" required></igc-input>
        <igc-input id="input-disabled" type="text" label="Disabled" value="This input is disabled" disabled></igc-input>
        <igc-input id="input-readonly" type="text" label="Readonly" value="This input is readonly" readonly></igc-input>
      </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

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

#radio-group {
    display: flex;
    margin: 0 auto;
    width: 15%;
}css

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

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

属性の完全なリストは、IgcInputComponent API にあります。

スタイル設定

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

名	説明
`container`	すべての主要な入力要素を保持するメインラッパー。
`input`	ネイティブ入力要素。
`label`	ネイティブラベル要素。
`prefix`	プレフィックスラッパー。
`suffix`	サフィックスラッパー。
`helper-text`	ヘルパーテキストラッパー。

igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}
scss

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputStyling.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputStyling {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input 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-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </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-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);
}
css

Web Components Input (入力) の概要

Web Components Input の例

Prefix と Suffix

ヘルパーテキスト

Input のサイズ設定

スタイル設定

API リファレンス

その他のリソース

Web Components Input (入力) の概要

Web Components Input の例

Prefix と Suffix

ヘルパー テキスト

Input のサイズ設定

スタイル設定

API リファレンス

その他のリソース

ヘルパーテキスト