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 CSS y JQuery predefinidos para incorporarlos en diferentes marcos.
En este artículo, aprenderemos a usar el módulo de búsqueda en la interfaz de usuario semántica de ReactJS. El módulo de búsqueda ayuda al usuario a buscar una consulta y recuperarla.
Propiedades:
- Estándar (Representación personalizada): la representación personalizada se utiliza para la representación personalizada y muestra el conjunto de resultados para la representación.
- Categoría: las propiedades de categoría se utilizan para mostrar categorías del contenido remoto.
- Categoría (representación personalizada): la representación personalizada de categoría es útil para la búsqueda de categorías con representación personalizada.
Sintaxis:
<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.
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar un módulo de búsqueda.
App.js
import React from 'react'
import { Search } 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 id='gfg'>
<h1>GeeksforGeeks</h1>
<h4>ReactJS semantic UI Search module</h4>
<Search/>
</div>
)
export default btt
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Ejemplo 2: En este ejemplo, mostramos el tamaño y la propiedad de carga en un menú desplegable.
App.js
import React from 'react'
import { Search } 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 id='gfg'>
<h1>GeeksforGeeks</h1>
<h4>ReactJS semantic UI Search module</h4>
<Search loading size='massive'/>
</div>
)
export default btt</div>
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia: https://react.semantic-ui.com/modules/search