Descripción general de la entrada React

La Ignite UI for React Input es un componente donde el usuario puede ingresar datos.

Ejemplo de entrada 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

¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react
cmd

Luego necesitarás importar IgrInput, su CSS necesario y registrar su módulo, así:

import { IgrInputModule, IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();
tsx

<IgrInput type="email" label="Subscribe"></IgrInput>
tsx

Prefijo sufijo

Con espacios prefix y suffix podemos agregar diferentes contenidos antes y después del contenido principal del Input. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de texto y un sufijo de icono:

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

Texto auxiliar

La ranura helper-text proporciona una pista colocada debajo de la Entrada. Agreguemos un texto de ayuda a la entrada de nuestro teléfono:

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

Tamaño de entrada

Podemos permitir que el usuario cambie el tamaño de IgrInput usando la variable CSS--ig-size. Para hacer esto, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño de la Entrada:

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

En el ejemplo anterior hemos demostrado el uso de los siguientes atributos:

• required: se utiliza para marcar la entrada como requerida
• disabled: se utiliza para deshabilitar la entrada.
• readonly: se utiliza para marcar la entrada como de solo lectura

Estilo

El IgrInput componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:

Nombre	Descripción
container	El contenedor principal que contiene todos los elementos de entrada principales.
input	El elemento de entrada nativo.
label	El elemento de etiqueta nativo.
prefix	El contenedor de prefijo.
suffix	El contenedor del sufijo.
helper-text	El contenedor de texto auxiliar.

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

Referencias de API

• IgrIcon
• IgrInput
• IgrRadio
• Styling & Themes

Recursos adicionales

• Ignite UI for React Foros
• Ignite UI for React GitHub