menu align left

This commit is contained in:
MaxKey
2022-05-26 15:50:54 +08:00
parent 3377d957ed
commit 7047d5f4e1
2 changed files with 40 additions and 35 deletions

View File

@@ -1,36 +1,42 @@
<ng-template #navMenu let-ls>
<ul nz-menu nzMode="horizontal" nzTheme="dark" style="text-align: center">
<!--一级菜单-->
<ng-container *ngFor="let mnav of ls">
<li nz-menu-item *ngIf="mnav.children.length == 0 && mnav.disabled == false" style="min-width: 80px">
<a *ngIf="mnav.externalLink == ''" href="#{{ mnav.link }}">{{ mnav.text }}</a>
<div nz-row style="margin: 0 24px 24px" class="ant-row">
<div nz-col nzMd="3" class="ant-col ant-col-md-3"></div>
<div nz-col nzMd="18" class="ant-col ant-col-md-18">
<ul nz-menu nzMode="horizontal" nzTheme="dark" style="text-align: left">
<!--一级菜单-->
<ng-container *ngFor="let mnav of ls">
<li nz-menu-item *ngIf="mnav.children.length == 0 && mnav.disabled == false" style="min-width: 80px">
<a *ngIf="mnav.externalLink == ''" href="#{{ mnav.link }}">{{ mnav.text }}</a>
<a *ngIf="mnav.externalLink != ''" href="#{{ mnav.externalLink }}" target="_blank">{{ mnav.text }}</a>
</li>
<li nz-submenu nzTitle="{{ mnav.text }}" *ngIf="mnav.children.length > 0">
<ul>
<!--二级菜单-->
<ng-container *ngFor="let snav of mnav.children">
<li nz-menu-item *ngIf="snav.children.length == 0 && mnav.disabled == false">
<a href="#{{ snav.link }}">{{ snav.text }}</a>
</li>
<li nz-submenu nzTitle="{{ snav.text }}" *ngIf="snav.children.length > 0">
<ul>
<!--三级菜单-->
<ng-container *ngFor="let tnav of snav.children">
<li nz-menu-item *ngIf="tnav.children.length == 0 && mnav.disabled == false">
<a href="#{{ tnav.link }}">{{ tnav.text }}</a>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>
<a *ngIf="mnav.externalLink != ''" href="#{{ mnav.externalLink }}" target="_blank">{{ mnav.text }}</a>
</li>
<li nz-submenu nzTitle="{{ mnav.text }}" *ngIf="mnav.children.length > 0">
<ul>
<!--二级菜单-->
<ng-container *ngFor="let snav of mnav.children">
<li nz-menu-item *ngIf="snav.children.length == 0 && mnav.disabled == false">
<a href="#{{ snav.link }}">{{ snav.text }}</a>
</li>
<li nz-submenu nzTitle="{{ snav.text }}" *ngIf="snav.children.length > 0">
<ul>
<!--三级菜单-->
<ng-container *ngFor="let tnav of snav.children">
<li nz-menu-item *ngIf="tnav.children.length == 0 && mnav.disabled == false">
<a href="#{{ tnav.link }}">{{ tnav.text }}</a>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>
</div>
<div nz-col nzMd="3" class="ant-col ant-col-md-3"></div>
</div>
</ng-template>
<ng-container *ngFor="let group of list">
<ng-template [ngTemplateOutlet]="navMenu" [ngTemplateOutletContext]="{ $implicit: group.children }"></ng-template>
</ng-container>
</ng-container>

View File

@@ -1,19 +1,18 @@
/*
* Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*
* http://www.apache.org/licenses/LICENSE-2.0
*
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DOCUMENT } from '@angular/common';
import { Component, ContentChildren, ElementRef, Inject, Input, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef } from '@angular/core';
@@ -38,7 +37,7 @@ import { LayoutDefaultOptions } from './types';
<div id="mainMenu" nzTheme="dark" style="background: #001529;" class="alain-default__fixed">
<!--<ng-container *ngTemplateOutlet="asideUser"></ng-container>-->
<ng-container *ngTemplateOutlet="nav"></ng-container>
<layout-default-nav *ngIf="!nav" class="d-block" style="margin-top: 64px; width:80%"></layout-default-nav>
<layout-default-nav *ngIf="!nav" class="d-block" style="margin-top: 64px; "></layout-default-nav>
</div>
<section class="alain-default__content">