如何在Angular 2中做出響應式導航？

我知道如何用JS和vanilla CSS做到這一點。不過，我在使用Angular 2時遇到了麻煩。如何在Angular 2中做出響應式導航？

將路由放在一邊，這就是我的組件看起來如此遙遠。

navbar.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent { 
    menuIcon = '☰'; 
    isCollapsed = true; 

    constructor() { } 

    onInit() { 

    } 

    public toggleNav() { 
    this.isCollapsed = !this.isCollapsed; 
    console.log(`Botton menu clicked`); 
    !this.isCollapsed ? this.menuIcon = '✖' : this.menuIcon = '☰'; 
    // return this.menuIcon; 
    } 

}

navbar.component.html

<nav> 
    <ul class="navigation"> 
    <li><a href="#" (click)="toggleNav()" id="menu__icon">{{menuIcon}}</a></li> 
    <span *ngIf="!isCollapsed"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">Contact</a></li> 
    </span> 
    </ul> 
</nav>

navbar.component.css

.navigation { 
    list-style: none; 
    margin: 0; 

    background: #111; 

    display: flex; 
    justify-content: flex-end; 
} 

.navigation a { 
    text-decoration: none; 
    display: block; 
    padding: 1em; 
    color: white; 
} 

.navigation a:hover { 
    background: lighten(#111, 15%); 
} 

@media all and (max-width: 800px) { 
    .navigation { 
    justify-content: space-around; 
    } 
} 


.navigation #menu__icon { 
    display: none; 
    } 



@media all and (max-width: 600px) { 
    .navigation { 
    flex-flow: column wrap; 
    padding: 0; 
    } 

    .navigation a { 
    text-align: center; 
    padding: 10px; 
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    } 

    .navigation li:last-of-type a { 
    border-bottom: none; 
    } 

    .navigation #menu__icon { 
    display: block; 
    } 

} 

.navigation #menu__icon a { 
    color: tomato; 
    font-size: 1.5em; 
    }

到目前爲止，它看起來像我想在移動設備。如何讓它在更大的視口上連續顯示？

來源

2017-03-05 Jaime Rios

在Angular2和typescript中使用引導。

NPM安裝--save引導

更新.angular-cli.json 添加引導鏈接樣式節

「風格」：「styles.css的」，「../node_modules/bootstrap/dist/css/bootstrap.min.css」]

然後關注此鏈接here

來源

2017-12-23 06:45:09

如何在Angular 2中做出響應式導航？

回答

相關問題