Saltar al contenido

cómo crear barra de navegación en el ejemplo de código de react js

Hola usuario de nuestro sitio, hallamos la solución a lo que buscabas, deslízate y la verás un poco más abajo.

Ejemplo: barra de navegación en el lado izquierdo en reaccionar

importReactfrom'react';importMDBIcon,MDBSideNavCat,MDBSideNavNav,MDBSideNav,MDBSideNavLink,MDBContainer,MDBRow,MDBBtnfrom'mdbreact';importBrowserRouterasRouterfrom'react-router-dom';classSideNavPageextendsReact.Component
  state =
    isOpen:falsehandleToggle=()=>this.setState(
      isOpen:!this.state.isOpen);;render()const isOpen =this.state;return(<Router><MDBContainer><MDBRow><MDBBtn onClick=this.handleToggle><MDBIcon icon="bars" size="5x"/></MDBBtn></MDBRow><MDBSideNav
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
            hidden
            triggerOpening=isOpen
            breakWidth=1300
            className="deep-purple darken-4"><li><ul className="social"><li><a href="#!"><MDBIcon fab icon="facebook-f"/></a></li><li><a href="#!"><MDBIcon fab icon="pinterest"/></a></li><li><a href="#!"><MDBIcon fab icon="google-plus-g"/></a></li><li><a href="#!"><MDBIcon fab icon="twitter"/></a></li></ul></li><MDBSideNavNav><MDBSideNavCat
                name="Submit blog"
                id="submit-blog"
                icon="chevron-right"><MDBSideNavLink>Submit listing</MDBSideNavLink><MDBSideNavLink>Registration form</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat
                name="Instruction"
                id="instruction"
                iconRegular
                icon="hand-pointer"
                href="#"><MDBSideNavLink>For bloggers</MDBSideNavLink><MDBSideNavLink>For authors</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat name="About" id="about" icon="eye"><MDBSideNavLink>Instruction</MDBSideNavLink><MDBSideNavLink>Monthly meetings</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat name="Contact me" id="contact-me" iconRegular icon="envelope"><MDBSideNavLink>FAQ</MDBSideNavLink><MDBSideNavLink>Write a message</MDBSideNavLink></MDBSideNavCat></MDBSideNavNav></MDBSideNav></MDBContainer></Router>);exportdefaultSideNavPage;

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *