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 segmento en la interfaz de usuario semántica de ReactJS. El elemento de segmento se utiliza para crear una agrupación de contenido relacionado.
Propiedades:
- Segmento de marcador de posición: se puede usar un segmento para reservar espacio para el contenido que se muestra de forma condicional.
- Levantado: A
- Apilado:
- apilado:
- Segmento Vertical:
Sintaxis:
<segment content='content' />
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 un componente de segmento simple para crear un segmento de contenido mediante el elemento Segmento de interfaz de usuario semántica.
App.js
import React from 'react'
import { Segment } 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 />
<Segment>GeeksforGeeks</Segment>
</div>
)
export default Btt
Producción:
Ejemplo 2: En este ejemplo, usaremos un componente de segmento con estado de carga para mostrar que el contenido del segmento se está cargando mediante el elemento Segmento de interfaz de usuario semántica.
App.js
import React from 'react'
import { Segment } 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 />
<Segment loading>loading</Segment>
</div>
)
export default Btt
Producción:
Referencia: https://react.semantic-ui.com/elements/segment