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 incorporarlos en diferentes marcos.
En este artículo, descubriremos cómo usar Portal Addons en ReactJS Semantic UI. Los complementos del portal se utilizan para representarlos en cualquier lugar de la página.
Propiedad:
- Controlado: La propiedad controlada se utiliza para hacer un portal controlado. La propiedad controlada se maneja básicamente para controlar el componente en React JS.
- , iselements
- se usa para describir el encabezado, el menú, etc. La propiedad de contenido se usa para extender los elementos.
- Solicitud de API
Sintaxis:
<Portal>Children content</Portal>
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 del portal.
App.js
import React, { Component } from 'react'
import { Button, Grid, Header, Segment, Portal } 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 PortalExamplePortal 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>
<Portal
closeOnTriggerClick
openOnTriggerClick
trigger={
<Button
content={open ? 'Close Portal' : 'Open Portal'}
negative={open}
positive={!open}
/>
}
onOpen={this.Open}
onClose={this.Close}
>
<Segment
style={{
left: '25%',
position: 'fixed',
top: '2%',
zIndex: 1000,
}}
>
<Header><h1>GeeksforGeeks</h1></Header>
<p>Computer Science Portal</p>
</Segment>
</Portal>
</Grid.Column>
</Grid>
</div>
)
}
}
index.css
#gfg {
margin: 40px;
}
Producción:
Referencia: https://react.semantic-ui.com/addons/portal