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 el elemento Loader en ReactJS Semantic UI. El elemento Loader se usa para alertar a un usuario para que espere a que se complete una actividad
Propiedades:
- Cargador de texto: un cargador que contiene texto.
Estados:
- Indeterminado: no está seguro de cuánto tiempo llevará abrir una tarea.
- Activo: cargador activo.
- Deshabilitado: cargador deshabilitado.
Sintaxis:
<loader />
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 cargador, dimmer y segmento con accesorios de dimmer como activos que alertarán al usuario para que espere a que se complete la actividad usando el elemento ReactJS Semantic UI Loader.
App.js
import React from 'react'
import {Loader, Dimmer, 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>
<Dimmer active>
<Loader />
</Dimmer>
</Segment>
</div>
)
export default Btt
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Producción:
Ejemplo 2: En este ejemplo, usaremos un componente de cargador, dimmer y segmento con props de dimmer como activo y el estado del segmento se cargará para cargar el texto usando el elemento ReactJS Semantic UI Loader
App.js
import React from 'react'
import {Loader, Dimmer, 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/>
<Dimmer active>
<Loader content='loading'/>
</Dimmer>
</div>
)
export default Btt
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Producción:
Referencia: https://react.semantic-ui.com/elements/loader