如何设计具有动态内容的导航栏

Posted 2023-03-05

【中文标题】如何设计具有动态内容的导航栏

【英文标题】：How to design nav bar with dynamic content

【发布时间】：2018-11-30 03:47:37

【问题描述】：

我正在设计一个网页，但我在实现我的视觉模型时遇到了困难：

Webpage design mockup

现在，我并不担心第 1 部分。我想要设计第 2 部分。我的网站使用 Angular 5 和 Bootstrap 3，以及 ngx-bootstrap 库将 Bootstrap 组件添加到 Angular。到目前为止，我有以下代码：

<div class="row"> <!-- Schedule / Budget Navbar-->
    <tabset type="pills">
      <tab heading="Schedule"></tab>
      <tab heading="Budget"></tab>
    </tabset>
</div>  
<div class="row"> <!-- Schedule / Budget Content -->
  <!-- <app-schedule/> OR <app-budget> -->
</div>

风格：

.nav-pills > li 
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */


.nav-pills 
    text-align: center;


.nav-pills > li > a
    color: black!important; 


.nav-pills > li > a.active
    background-color: #424242!important;
    color: white!important; 

How it currently looks

但我希望按钮的设计与模型中的一样。我还希望导航栏后的第 2 部分根据选择的预算或时间表来呈现内容。我正在考虑为这两个功能中的每一个添加一个组件，并在元素 <app-budget/> 和 <app-schedule/> 之间动态更改，并且这些组件将附加到各自的组件上。

【参考方案1】：

您应该使用路由。假设你有两个组件：计划和预算，在你的 app.component 中写：

<div class="row"> <!-- Schedule / Budget Navbar-->
    <tabset type="pills">
      <a routerLink="/schedule"><tab heading="Schedule"></tab></a>
      <a routerLink="/budget"><tab heading="Budget"></tab></a>
    </tabset>
</div>  
<div class="row"> <!-- Schedule / Budget Content -->
  <router-outlet></router-outlet>
</div>

现在在你的 app.module.ts 中导入 RouterModule 并添加：

RouterModule.forRoot([
             path: 'schedule', component: ScheduleComponent ,
             path: 'budget', component: BudgetComponent ,
             path: '', component: HomeComponent 
        ])

在导入数组中。

要在选择一个组件时设置按钮样式，请查看 RouterLinkActive。 https://angular.io/api/router/RouterLinkActive

官方文档：https://angular.io/tutorial/toh-pt5