React 입력 개요

Ignite UI for React 입력은 사용자가 데이터를 입력할 수 있는 구성 요소입니다.

React 입력 예제

EXAMPLE

TSX

CSS

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputOverview/>);
tsxコピー

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

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

npm install igniteui-react
cmd

그런 다음 다음과 같이 필요한 CSS인 IgrInput 가져오고 해당 모듈을 등록해야 합니다.

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 슬롯을 사용하면 입력의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 다음 샘플에서는 텍스트 접두사와 아이콘 접미사가 있는 새 입력 필드를 만듭니다.

EXAMPLE

TSX

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';

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputPrefixSuffix/>);
tsxコピー

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

Edit in: Codesandbox

도우미 텍스트

​helper-text 슬롯은 입력 아래에 배치된 힌트를 제공합니다. 전화기 입력에 도우미 텍스트를 추가해 보겠습니다.

EXAMPLE

TSX

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';

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputHelperText/>);
tsxコピー

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

Edit in: Codesandbox

입력 크기 조정

사용자가 크기를 변경하도록 허용할 수 있습니다. IgrInput 사용하여--ig-size CSS 변수. 이를 위해 모든 크기 값을 표시하는 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나가 선택될 때마다 입력 크기가 변경됩니다.

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

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputSize/>);
tsxコピー

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

.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コピー

Edit in: Codesandbox

위 샘플에서는 다음 속성의 사용을 보여주었습니다.

• required- 입력을 필수로 표시하는 데 사용됩니다.
• disabled- 입력을 비활성화하는 데 사용됩니다.
• readonly- 입력을 읽기 전용으로 표시하는 데 사용됩니다.

스타일링

구성 요소는 IgrInput 거의 모든 내부 요소에 대한 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

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputStyling/>);
tsxコピー

/* 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コピー

Edit in: Codesandbox

API 참조

• IgrIcon
• IgrInput
• IgrRadio
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub