ng-ytl-zorro-antd/src/showcase/app.component.html

An enterprise-class UI components based on Ant Design and Angular

<div class="page-wrapper">
  <header id="header" class="clearfix">
    <div nz-row>
      <div nz-col [nzXs]="'24'" [nzSm]="'8'" [nzMd]="'8'" [nzLg]="'4'">
        <a id="logo" href>
          <img alt="logo" src="./assets/img/zorro.svg">
          <span>NG-ZORRO</span>
        </a>
      </div>
      <div nz-col [nzXs]="'0'" [nzSm]="'16'" [nzMd]="'16'" [nzLg]="'20'" class="nav nav-hide">
        <div id="search-box">
          <nz-select [nzPlaceHolder]="'搜索组件...'" [nzMode]="'combobox'" [(ngModel)]="searchComponent" (ngModelChange)="navigateToPage($event)">
            <nz-option [nzValue]="component.path" [nzLabel]="component.label+' - '+component.zh" *ngFor="let component of componentList"></nz-option>
          </nz-select>
        </div>
        <div class="version">
          <nz-select [nzPlaceHolder]="'搜索组件...'" [nzSize]="'small'" [ngModel]="currentVersion" (ngModelChange)="navigateToVersion($event)">
            <nz-option [nzValue]="version" [nzLabel]="version" *ngFor="let version of versionList"></nz-option>
          </nz-select>
        </div>

        <ul nz-menu [nzMode]="'horizontal'" id="nav">
          <li nz-menu-item nzSelected>
            <a routerLink="/docs/angular/introduce"><span>组件</span></a>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <div class="main-wrapper">
    <div nz-row>
      <div nz-col [nzXs]="'24'" [nzSm]="'24'" [nzMd]="'6'" [nzLg]="'4'">
        <ul nz-menu [nzMode]="'inline'" class="aside-container">
          <li *ngFor="let intro of routerList.intro" nz-menu-item routerLinkActive="ant-menu-item-selected" style="padding-left: 24px;">
            <a routerLink="{{intro.path}}">{{intro.label}}</a>
          </li>
          <li nz-submenu nzOpen>
            <span title><h4>Components</h4></span>
            <ul>
              <li nz-menu-group *ngFor="let group of routerList.components">
                <span title>{{group.name}}</span>
                <ul>
                  <li nz-menu-item routerLinkActive="ant-menu-item-selected" *ngFor="let component of group.children">
                    <a routerLink="{{component.path}}">
                      <span>{{component.label}}</span><span class="chinese">{{component.zh}}</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div nz-col class="main-container" [nzXs]="'24'" [nzSm]="'24'" [nzMd]="'18'" [nzLg]="'20'">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
  <footer id="footer">
    <ul>
      <li><h2><i class="anticon anticon-github"></i> GitHub</h2>
        <div>
          <a target="_blank " href="https://github.com/NG-ZORRO/ng-zorro-antd"><span>源码仓库</span></a>
        </div>
        <div>
          <a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
            <span>Awesome Ant Design</span></a>
        </div>
      </li>
      <li><h2><i class="anticon anticon-link"></i> <span>相关站点</span></h2>
        <div>
          <a href="http://www.angular.cn" target="_blank">Angular</a>
          <span> - </span><span>中文网</span></div>
        <div>
          <a href="https://cli.angular.io/" target="_blank">CLI</a>
          <span> - </span><span>脚手架工具</span></div>
        <div>
          <a href="https://ant.design/docs/react/introduce-cn" target="_blank">Ant Design</a>
          <span> - </span><span>React版本</span></div>
        <div>
          <a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a>
          <span> - </span><span>数据可视化</span></div>
        <div>
          <a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">AntD Library</a>
          <span> - </span><span>Axure 部件库</span></div>
      <li><h2>
        <i class="anticon anticon-customer-service"></i> <span>社区</span>
      </h2>
        <div>
          <a href="#/changelog"><span>更新记录</span></a>
        </div>
        <div>
          <a target="_blank" rel="noopener noreferrer" href="http://ng.ant.design/issue-helper/#/new-issue">
            <span>报告 Bug</span></a>
        </div>
      </li>
      <li>
        <h2>Copyright © 2017</h2>
        <div><span>计算平台事业部 & 阿里云事业群 </span></div>
        <div>@NG-ZORRO</div>
      </li>
    </ul>
  </footer>
</div>