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, aprenderemos cómo usar los comportamientos de visibilidad en la interfaz de usuario semántica de ReactJS. Los comportamientos de visibilidad se utilizan para las funciones de devolución de llamada junto con las plantillas.
Sintaxis:
<Visibility function/>
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: Tendrá el siguiente aspecto.
Estructura del proyecto:
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 el módulo de visibilidad.
App.js
import React, { Component } from 'react'
import {Grid, Image, Visibility} from 'semantic-ui-react'
export default class VisibilityExampleFireOnMount extends Component {
OnScreen = () => alert('on')
render() {
return (
<Grid columns={2}>
<Grid.Column>
<Visibility
fireOnMount
onOnScreen={this.OnScreen}
>
</Visibility>
</Grid.Column>
<Image id='gfg' src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' >
</Image>
</Grid>
)
}
}
Producción:
Ejemplo 2: En este ejemplo, mostramos los comportamientos de visibilidad en una alerta.
App.js
import React, { Component } from 'react'
import {Grid, Image, Visibility} from 'semantic-ui-react'
export default class VisibilityExampleFireOnMount extends Component {
OnScreen = () => alert('GeeksforGeeks')
render() {
return (
<Grid columns={2}>
<Grid.Column>
<Visibility
fireOnMount
onOnScreen={this.OnScreen}
>
</Visibility>
</Grid.Column>
<Image id='gfg' src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' >
</Image>
</Grid>
)
}
}
Producción:
Referencia: https://react.semantic-ui.com/behaviors/visibility