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 los lenguajes CSS y JQuery predefinidos para incorporar en diferentes marcos.
En este artículo, descubriremos cómo usar los complementos de TransitionablePortal en la interfaz de usuario semántica de ReactJS. Los complementos de TransitionablePortal se utilizan para representarlo en cualquier parte de la página.
Propiedad:
- Controlado: la propiedad controlada se usa para hacer el TransitionablePortal controlado. Para el control, se utiliza para definir la transición.
- bsPrefix: este accesorio se usa para indicar el cambio en un componente en CSS. Se utiliza para personalizar el CSS de arranque. El valor predeterminado es el girador y el tipo es una string.
- tamaño: El tamaño de los accesorios se usa para demostrar el tamaño de la rueda giratoria. El tamaño de los puntales se utiliza en las variaciones de tamaño de los componentes. El tipo de tamaño es sm.
- color: los accesorios de color se utilizan para indicar el color de la ruleta.
- className: los accesorios className se utilizan para indicar el nombre de la clase para diseñar el componente en CSS.
- children: Se utiliza para pasar el elemento children a este componente en React JS. El tipo de niños es un elemento.
Sintaxis:
<TransitionablePortal>Children content</TransitionablePortal>
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: Este es el ejemplo básico que muestra cómo usar los complementos de TransitionablePortal.
App.js
import React, { Component } from 'react'
import { Button, Grid, Header, Segment,
TransitionablePortal } 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);
export default class
TransitionablePortalExampleTransitionablePortal
extends Component {
state = {
open: false,
}
Open = () => {
this.setState({ open: true })
}
Close = () => {
this.setState({ open: false })
}
render() {
const { open } = this.state
return (
<div id='gfg'>
<Grid columns={2}>
<Grid.Column>
<TransitionablePortal
closeOnTriggerClick
openOnTriggerClick
trigger={
<Button
content={open ? 'Close TransitionablePortal'
: 'Open TransitionablePortal'}
negative={open}
positive={!open}
/>
}
onOpen={this.Open}
onClose={this.Close}
>
<Segment
style={{
left: '32%',
position: 'fixed',
top: '2%',
zIndex: 1000,
}}
>
<Header><h1>GeeksforGeeks</h1></Header>
<p>Computer Science Portal</p>
</Segment>
</TransitionablePortal>
</Grid.Column>
</Grid>
</div>
)
}
}
index.css
#gfg {
margin: 40px;
}
Producción:
Ejemplo 2: en este ejemplo, hemos establecido la transición en 1000 en los complementos de TransitionablePortal.
App.js
import React, { Component } from 'react'
import { Button, Grid, Header, Segment,
TransitionablePortal } 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);
export default class
TransitionablePortalExampleTransitionablePortal
extends Component {
state = {
open: false,
}
Open = () => {
this.setState({ open: true })
}
Close = () => {
this.setState({ open: false })
}
render() {
const { open } = this.state
return (
<div id='gfg'>
<Grid columns={2}>
<Grid.Column>
<TransitionablePortal
transition = {{
animation: 'scale',
duration: 1000,}}
closeOnTriggerClick
openOnTriggerClick
trigger={
<Button
content={open ?
'Close TransitionablePortal' :
'Open TransitionablePortal'}
negative={open}
positive={!open}
/>
}
onOpen={this.Open}
onClose={this.Close}
>
<Segment
style={{
left: '32%',
position: 'fixed',
top: '2%',
zIndex: 1000,
}}
>
<Header><h1>GeeksforGeeks</h1></Header>
<p>Computer Science Portal</p>
</Segment>
</TransitionablePortal>
</Grid.Column>
</Grid>
</div>
)
}
}
index.css
#gfg {
margin: 40px;
}
Producción:
Referencia: https://react.semantic-ui.com/addons/transitionable-portal