0
275
VistasCómo tener contenido atenuado en Semantic UI React (NextJS)
Tengo un problema al implementar contenido atenuado en la barra lateral de reacción de la interfaz de usuario semántica en nextjs ...
Este es el contenido atenuado en la interfaz de usuario semántica 
https://react.semantic-ui.com/modules/sidebar/#states-dimmed
este es mi código de diseño:
import React, { useState } from 'react'; import CartSidebar from './CartSidebar'; import Navbar from './Navbar'; const StoreLayout = ({ children }) => { const [toggleCart, setToggleCart] = useState(false); function toggleMenuCart() { setToggleCart(!toggleCart); } return ( <> <CartSidebar toggleMenu={toggleCart} /> <Navbar onToggleMenuCart={toggleMenuCart} /> {children} </> ); }; export default StoreLayout;este es mi código de barra de navegación:
<nav> <div className="borderLeftList"> <li className="cart"> <Button onClick={props.onToggleMenuCart} className="cart-icon empty" /> </li> </div> </nav>este es mi código de barra lateral:
import React, { useState } from 'react'; import cn from 'classnames'; import { Icon, Menu } from 'semantic-ui-react'; import Link from 'next/link'; export default function CartSidebar(props) { const classes = cn( 'ui', 'sidebar', 'push', 'right', 'inverted', 'menu', 'vertical', 'animating', { visible: props.toggleMenu } ); return ( <div className={classes}> <Menu.Item as={Link} href="/admin"> <a> <i className="fa fa-home" /> Dashboard </a> </Menu.Item> <Menu.Item as={Link} href="/admin/orders"> Second Menu </Menu.Item> <Menu.Item as={Link} href="/admin/products"> Third Menu </Menu.Item> </div> ); }este es mi código _app.js:
<StoreLayout> <Component {...pageProps} /> </StoreLayout>si necesitas más detalles puedes preguntar en el comentario... Muchas gracias de antemano!!! :)
2 Respuestas
Responde la pregunta0
La documentación muestra que atenuará a todos sus hijos:
<Dimmer active={true} page> <ChildComponent/> </Dimmer>Lo que luego atenuará el componente secundario. Junto con eso, también puede especificar propiedades como "página" para indicarle que atenúe toda la página.
Si está tratando de usarlo con la barra lateral, debe envolver el contenido de la barra lateral en un atenuador.
const Page = () => { const [active, setActive] = useState(false) return <div> <Sidebar setActive={setActive}/> <Dimmer active={active} page> // this is a child <Content/> </Dimmer> </div> }Luego, en la barra lateral, deberá configurar el activo cuando haga clic en un elemento o lo que sea. Este ejemplo no es perfecto, solo le da una idea aproximada de lo que puede hacer.
Alternativamente:
.dimmed { background: black; opacity: 0.5; }También puede hacerlo usted mismo y aplicar una clase con opacidad a lo que necesite atenuarse.
0
CRÉDITOS A @Matriarx por darme una idea de cómo responder a su pregunta...
Debe importar el Dimmer en sematic-ui-react y luego criar al niño usando este código:
<Dimmer.Dimmable dimmed={toggleCart}> <Dimmer className="dimmedContent" active={toggleCart} onClickOutside={handleHide} />pon esto en tu css para que puedas darte un estilo, sin este css no puedes hacer la pantalla completa atenuada
.dimmedContent { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.25) !important; cursor: default !important; z-index: 8 !important; }este es el codigo completo:
import React, { useState } from 'react'; import { Dimmer } from 'semantic-ui-react'; import CartSidebar from './CartSidebar'; import Navbar from './Navbar'; const StoreLayout = ({ children }) => { const [toggleCart, setToggleCart] = useState(false); function toggleMenuCart() { setToggleCart(!toggleCart); } const handleHide = () => { setToggleCart({ active: false }); }; return ( <> <Dimmer.Dimmable dimmed={toggleCart}> <Dimmer className="dimmedContent" active={toggleCart} onClickOutside={handleHide} /> <CartSidebar toggleMenu={toggleCart} /> <Navbar onToggleMenuCart={toggleMenuCart} /> {children} </Dimmer.Dimmable> </> ); }; export default StoreLayout;Además, no olvides poner el css que proporcioné arriba :)
¡Salud!