vmware-clarity - 移动响应式顶部菜单

Question

我正在使用带角度的清晰设计系统，顶部菜单不是移动响应

 <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>

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

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

标签： vmware-clarity

Answer 1

要使用响应式导航，请参阅https://v2.clarity.design/navigation上的文档。您需要使用clr-main-containerandclr-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>