移动响应式顶部菜单

Question

我正在使用 Clarity Design System angular 并且顶部菜单不是移动响应

 <header class="header-2">
  <div class="branding">
      <a class="nav-link">
          <clr-icon shape="home"  size="24"></clr-icon>
          <span class="title">title</span>
      </a>
     </div>
    <div class="header-nav">
      <a class="nav-link nav-text" routerLink="/home">Home</a>
      <a class="active nav-link nav-text" 
    routerLink="/login">Login</a>
   </div>
  </header>

我希望顶部菜单在宽度减小时变成几行（按钮）

或者我应该使用不同的标签吗？

Answer 1

要使用响应式导航，请参阅 https://v2.clarity.design/navigation 上的文档。您需要使用 clr-main-container 和 clr-header 元素来启用此行为。

鉴于您的标记，它应该类似于以下内容。

<clr-main-container>
    <clr-header class="header-2">
       <div class="branding">
         <a class="nav-link">
          <clr-icon shape="home"  size="24"></clr-icon>
          <span class="title">title</span>
        </a>
      </div>
      <div class="header-nav" [clr-nav-level]="1">
        <a class="nav-link nav-text" routerLink="/home">Home</a>
        <a class="active nav-link nav-text" routerLink="/login">Login</a>
      </div>
    </clr-header>
    <div class="content-container">
        <main class="content-area">
            ... the main body content goes here, probably a router-outlet
        </main>
        <nav class="sidenav" [clr-nav-level]="2">
            ... if you want a sidenav that is, or omit this
        </nav>
    </div>
</clr-main-container>

Answer 2

是的，它现在运行完美，它解决了这个问题

所以现在是：

<clr-main-container>
<clr-header class="header-2">
<div class="branding">
      <a class="nav-link">
      <clr-icon shape="home"  size="24"></clr-icon>
      <span class="title">{{title}}</span>
      </a>
  </div>
  <div class="header-nav" [clr-nav-level]="1">
  <div class="header-nav">
      <a class="nav-link nav-text" routerLink="/home">Home</a>
      <a class="active nav-link nav-text" routerLink="/login">Login</a> 

  </div>
</div>
  </clr-header>

非常感谢

移动响应式顶部菜单

Mobile responsive top menu

vmware-clarity