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, sabremos cómo usar las colecciones de menús en la interfaz de usuario semántica de ReactJS. Colecciones de menú se utiliza para hacer un menú que contiene alguna información.
Propiedades:
- Menú Secundario: Nosotros
- Apuntando: Podemos hacer un menú apuntando que apunte a su cercano
- tabular: nosotros
- Texto: podemos hacer un menú para contenidos de texto usando esta propiedad
- Menú Vertical: Se utiliza para crear un
- Paginación: Se utiliza para hacer una
- Desplazamiento: podemos crear un menú que se pueda desplazar mediante el uso de este estado.
- Activo: podemos hacer un menú activo usando el estado activo.
- Deshabilitado: un menú se puede deshabilitar usando este estado.
Sintaxis:
<menu>
<menu.Item>
Content
</menu.Item>
</menu/>
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 las colecciones de menús usando las colecciones de menús de la interfaz de usuario semántica de ReactJS.
App.js
import React,{Component} from 'react'
import { Menu } 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);
export default class MenuExampleBasic extends Component {
state = {}
btt = ({ name }) => this.setState({ activeItem: name })
render() {
const { gfg1 } = this.state
return (
<Menu>
<Menu.Item
name='GeeksforGeeks'
active={gfg1 === 'GeeksforGeeks'}
onClick={this.btt}>
GeeksforGeeks
</Menu.Item>
<Menu.Item
name='ReactJS'
active={gfg1 === 'ReactJS'}
onClick={this.btt}>
ReactJS
</Menu.Item>
<Menu.Item
name='SemanticUI'
active={gfg1 === 'SemanticUI'}
onClick={this.btt}>
SemanticUI
</Menu.Item>
</Menu>
)
}
}
Producción:
Ejemplo 2: en este ejemplo, mostramos el estado deshabilitado en una colección de menús mediante el uso de colecciones de menús de IU semántica de ReactJS.
App.js
import React,{Component} from 'react'
import { Menu } 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);
export default class MenuExampleBasic extends Component {
state = {}
btt = ({ name }) => this.setState({ activeItem: name })
render() {
const { gfg1 } = this.state
return (
<Menu>
<Menu.Item disabled
name='GeeksforGeeks'
active={gfg1 === 'GeeksforGeeks'}
onClick={this.btt}>
GeeksforGeeks
</Menu.Item>
<Menu.Item disabled
name='ReactJS'
active={gfg1 === 'ReactJS'}
onClick={this.btt}>
ReactJS
</Menu.Item>
<Menu.Item disabled
name='SemanticUI'
active={gfg1 === 'SemanticUI'}
onClick={this.btt}>
SemanticUI
</Menu.Item>
</Menu>
)
}
}
Producción:
Referencia: https://react.semantic-ui.com/collections/menu