Ignite UI for React Input は、ユーザーがデータを入力できるコンポーネントです。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrInput, IgrInputModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();
export default class InputOverview extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrInput type="email" label="Subscribe" placeholder="john.doe@mail.com">
<span slot="prefix">Email</span>
</IgrInput>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputOverview/>);
tsx
このサンプルが気に入りましたか? 完全な 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 フィールドを作成します:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrInput, IgrInputModule, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();
IgrIconModule.register();
export default class InputPrefixSuffix extends React.Component<any, any> {
public phoneIcon: IgrIcon;
constructor(props: any) {
super(props);
this.iconRef = this.iconRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrInput type="tel" label="Phone" placeholder="888 123456">
<span slot="prefix">+359</span>
<IgrIcon ref={this.iconRef} name="phone" />
<span slot="suffix"></span>
</IgrInput>
</div>
);
}
public iconRef(icon: IgrIcon){
if (!icon) { return; }
this.phoneIcon = icon;
const phoneIconText = '<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>';
this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputPrefixSuffix/>);
tsx
![Ignite UI for React | CTA Banner](https://static.infragistics.com/marketing/Blog-in-content-ads/jp/ignite-ui-react-01.gif)
ヘルパー テキスト
helper-text
スロットは、入力の下に配置されたヒントを提供します。Phone Input にヘルパー テキストを追加しましょう:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrInput, IgrInputModule, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();
IgrIconModule.register();
export default class InputHelperText extends React.Component<any, any> {
public phoneIcon: IgrIcon;
constructor(props: any) {
super(props);
this.iconRef = this.iconRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrInput type="tel" label="Phone">
<span slot="prefix">+359</span>
<IgrIcon ref={this.iconRef} name="phone" />
<span slot="helper-text">Ex.: +359 888 123 456</span>
</IgrInput>
</div>
);
}
public iconRef(icon: IgrIcon){
if (!icon) { return; }
this.phoneIcon = icon;
const phoneIconText = '<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>';
this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputHelperText/>);
tsx
ユーザーが --ig-size
CSS 変数を使用して IgrInput
のサイズを変更できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびに、Input のサイズを変更します。
EXAMPLE
TSX
index.css
InputSizeStyling.css
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './InputSizeStyling.css';
import { IgrInput, IgrInputModule, IgrRadio, IgrRadioModule, IgrRadioGroup, IgrRadioGroupModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();
IgrRadioModule.register();
export default class InputSize extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.onRadioChange = this.onRadioChange.bind(this);
this.state = { size: "medium"};
}
public render(): JSX.Element {
return (
<div className="container sample">
<div id="radioGroup">
<IgrRadioGroup alignment="horizontal">
<IgrRadio name="size" value="small" labelPosition="after" change={this.onRadioChange}><span>Small</span></IgrRadio>
<IgrRadio name="size" value="medium" labelPosition="after" checked="true" change={this.onRadioChange}><span>Medium</span></IgrRadio>
<IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}><span>Large</span></IgrRadio>
</IgrRadioGroup>
</div>
<IgrInput className={'size-' + this.state.size} type="text" label="Required" value="This input is required" required="true" />
<IgrInput className={'size-' + this.state.size} type="text" label="Disabled" value="This input is disabled" disabled="true" />
<IgrInput className={'size-' + this.state.size} type="text" label="Readonly" value="This input is readonly" readOnly="true" />
</div>
);
}
public onRadioChange(e: any) {
if (e.checked == true) {
this.setState({ calendarSize: e.value });
}
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputSize/>);
tsx
.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}
css
.button-container {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}
#radioGroup {
display: flex;
margin: 0 auto;
width: 15%;
}
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
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrInput, IgrInputModule, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputStyling.css';
IgrInputModule.register();
IgrIconModule.register();
export default class InputStyling extends React.Component<any, any> {
public phoneIcon: IgrIcon;
constructor(props: any) {
super(props);
this.iconRef = this.iconRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrInput type="tel" label="Phone">
<span slot="prefix">+359</span>
<IgrIcon ref={this.iconRef} name="phone" />
<span slot="helper-text">Ex.: +359 888 123 456</span>
</IgrInput>
</div>
);
}
public iconRef(icon: IgrIcon){
if (!icon) { return; }
this.phoneIcon = icon;
const phoneIconText = '<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>';
this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputStyling/>);
tsx
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
API リファレンス
その他のリソース