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.
El elemento Revelar en ReactJS Semantic UI se usa para revelar el contenido al pasar el cursor sobre el contenido anterior.
Propiedades:
- Mover: el elemento se mueve en la dirección para revelar el contenido.
- Girar: el elemento gira en la dirección para revelar el contenido.
Estados:
- Activo: Muestra su contenido oculto.
- Deshabilitado: no se animará cuando pase el mouse por encima.
Sintaxis:
<reveal> <reveal.content/> </reveal>
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 revelación con accesorios animados y un tipo de contenido de fundido pequeño, por lo que usaremos el elemento Revelación de interfaz de usuario semántica.
App.js
import React from 'react'
import { Image, Reveal, List } 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 />
<Reveal animated='small fade'>
<Reveal.Content visible>
<Image src=
'https://react.semantic-ui.com/images/wireframe/square-image.png'
size='small' />
</Reveal.Content>
<Reveal.Content hidden>
<Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'
size='small' />
</Reveal.Content>
</Reveal>
</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 revelación con accesorios animados y moveremos el tipo a la derecha usando el elemento Revelación de IU semántica.
App.js
import React from 'react'
import { Image, Reveal, List } 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 />
<Reveal animated='move right'>
<Reveal.Content visible>
<Image src=
'https://react.semantic-ui.com/images/wireframe/square-image.png'
size='small' />
</Reveal.Content>
<Reveal.Content hidden>
<Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'
size='small' />
</Reveal.Content>
</Reveal>
</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/reveal