La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.
En este artículo veremos cómo usar elementos de entrada en la interfaz de usuario semántica de ReactJS. El elemento de entrada se usa para crear un campo que ingresará algún texto.
Estados:
- Enfoque: el campo de entrada parece estar enfocado.
- Cargando: la entrada se está cargando.
- Error: la entrada contiene un error.
- Deshabilitado: la entrada está deshabilitada.
Sintaxis:
<input placeholder='search' />
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
-
Paso 3: instale la interfaz de usuario semántica en su directorio dado.
npm install semantic-ui-react semantic-ui-css
Estructura del proyecto : Se verá como lo siguiente.
Ejemplo 1: en este ejemplo, usaremos un componente de entrada simple con accesorios de marcador de posición, mediante el uso del elemento de entrada de interfaz de usuario semántica.
App.js
import React from 'react'
import {Input} from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const Btt = () =>(
<div>
<br/>
<Input placeholder='Click to search' />
</div>
)
export default Btt
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.
Ejemplo 2: en este ejemplo, usaremos un componente de entrada simple que se deshabilitará por el estado deshabilitado y accesorios de marcador de posición, mediante el uso del elemento de entrada de IU semántica.
App.js
import React from 'react'
import {Input} from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const Btt = () =>(
<div>
<br/>
<Input disabled placeholder='Click to search' />
</div>
)
export default Btt
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia: https://react.semantic-ui.com/elements/input