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 elementos de etiqueta en la interfaz de usuario semántica de ReactJS. El elemento de etiqueta se utiliza para mostrar la clasificación del contenido.
Propiedades:
- Señalando: Podemos hacer
- Aviso: Podemos hacer
- Esquina: Podemos hacer
- Etiqueta: Esta propiedad puede hacer
- Cinta: Podemos hacer
- Adjunto: Podemos hacer
- Horizontal: Podemos hacer un
- Flotante: Esta propiedad puede hacer
Sintaxis:
<label enabled/>
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: En este ejemplo, utilizaremos elementos de etiqueta e icono para mostrar la etiqueta básica mediante el uso del elemento Etiqueta de interfaz de usuario semántica de ReactJS.
App.js
import React from 'react'
import {Icon,Label} 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 = () =>(
<Label>
<br/>
<Icon enabled name='angle double left' size='big' />
<Icon enabled name='angle left' size='big' />
<Icon enabled name='circle' size='big' />
<Icon enabled name='angle right' size='big' />
<Icon enabled name='angle double right' size='big' />
</Label>
)
export default Btt
Producción:
Ejemplo 2: En este ejemplo, utilizaremos elementos de etiqueta e icono para mostrar la etiqueta deshabilitada mediante el uso del elemento Etiqueta de interfaz de usuario semántica de ReactJS.
App.js
import React from 'react'
import {Icon,Label} 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 = () =>(
<Label>
<br/>
<Icon disabled name='angle double left' size='big' />
<Icon disabled name='angle left' size='big' />
<Icon disabled name='circle' size='big' />
<Icon disabled name='angle right' size='big' />
<Icon disabled name='angle double right' size='big' />
</Label>
)
export default Btt
Producción:
Referencia: https://react.semantic-ui.com/elements/label