La Ignite UI for React Input es un componente donde el usuario puede ingresar datos.
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 コピー
¿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:
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 コピー
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:
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 コピー
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 });
}
}
}
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 コピー
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 componente Entrada expone partes CSS para casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas por la entrada:
Nombre
Descripción
envase
El contenedor principal que contiene todos los elementos de entrada principales.
aporte
El elemento de entrada nativo.
etiqueta
El elemento de etiqueta nativo.
prefijo
El contenedor de prefijo.
sufijo
El contenedor del sufijo.
texto de ayuda
El contenedor de texto auxiliar.
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 コピー
Referencias de API
Recursos adicionales