¿Cómo hacer una barra de navegación receptiva usando el material Angular 2?

Luego de consultar expertos en el tema, programadores de varias ramas y profesores hemos dado con la solución al problema y la plasmamos en esta publicación.

Solución:

Esto es lo que usé para construir mi respuesta nav-bar usando Angular2+ Material 2 y diseño flexible en angular-cli aplicación

(Visite Instalar material angular y CDK angular)

1) Instalar diseño flexible

npm install @angular/flex-layout -save

2) Incluir diseño flexible en tus app.module.ts

import FlexLayoutModule from "@angular/flex-layout";

3) Importar

imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RoutingModule,
 FlexLayoutModule,
MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules).
],

aplicación.componente.html

    
    home 
        title

    
    
    

        Products
        Dashboard
    
    
     menu
    



    Products
    Dashboard
    

aplicación.componente.css

.fill-remaining-space 
   /*This fills the remaining space, by using flexbox.  
  Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;

Nota: para probar, cambia el tamaño de tu página.

echa un vistazo a los documentos de diseño flexible

Esta es mi forma favorita de crear una barra de navegación receptiva en Angular. Si usa Angular 6, asegúrese de usar una versión 6.1+
Ejemplo de trabajo en Stackblitz: https://stackblitz.com/edit/angular-v6xwte

Ejemplo en una pantalla más pequeña:

Ejemplo en una pantalla más grande:

Aquí hay pasos precisos de cómo hacerlo:

1) Instalar los paquetes necesarios. Escribe en tu terminal:

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2) Importe los módulos necesarios en su app.module.ts

import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  FlexLayoutModule  from '@angular/flex-layout';
import 
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
 from '@angular/material';

Recuerda agregar estos módulos a las importaciones. array debajo.

3) Agregue un enlace de iconos de material a su index.html
El enlace debe ir antes de cualquier contenido de Angular.

4) En su styles.css, agregue un tema Angular y establezca los márgenes en 0%

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";
body
    margin: 0%;

5) Agregue el código HTML de la barra de herramientas en su app.component.html

 

    

      
        menu
      
    
    
      Site name
    
    
    

      About us
      Prices
      Start page
      Offer
      Contact
    
  
  
    
      

        About us
        Prices
        Start page
        Offer
        Contact
      
    
    
      Awesome content
    
  

6) Diseña la barra de herramientas en tu app.component.css

.companyName
    font-size: 150%;

div 
    overflow: inherit;

a
    text-decoration: none;
    font-size: 110%;
    white-space: normal;

button
    font-size: 110%;
    min-width: min-content;

.example-icon 
    padding: 0 14px;
  

  .example-spacer 
    flex: 1 1 auto;
  
  .mat-sidenav-content
      font-size: 200%;
      text-align: center;
  

los forma más sencilla para crear una barra de navegación receptiva con Material, use los esquemas CLI de Angular 6.

• Actualice su proyecto Angular a 6 o cree un nuevo proyecto
• ng agregar @ angular / material
• ng generar @angular/material:material-nav –name=my-nav

(Si obtiene ‘Colección “@angular/material” no se puede resolver’ cuando ejecuta ng add @angular/material, vea esto)

Luego usa el componente generado.
Agregue la etiqueta anterior a su componente principal

Vista receptiva en PC de escritorio:

Menú colapsado receptivo con baja resolución:

Esto se vio originalmente en el blog de Angular.

Acuérdate de que tienes la capacidad de decir si te ayudó.

---

---

Utiliza Nuestro Buscador