Question

我有一个动态生成的（在Angular中）菜单和子菜单项，它们带有对同一组件的嵌套调用。 <div>元素创建容器以及每个菜单项。我有一些带有'V'和'H'值的变量，这些变量允许我通过动态创建以H或V字符结尾的类来水平或垂直放置菜单项-这些是css类：

.menuContainer-V {
    display: table;
}
.menuContainer-H {
    display: inline-table;
}
.menuItemsContainer-H {
    display: flex;
    float: left;
    flex-wrap: wrap;
}

仅此而已。（没有类：“ menuItemsContainer-V”，因为<div>个项目自然对齐）。

这就是我想要的布局：

“菜单A”的类别为：“ menuContainer-V”。
“菜单B”和所有其他菜单的类别为：“ menuContainer-H”
及其项目的容器-类：“ menuItemsContainer-H”。

这一次对上面我指定的类可以正常工作-除了-当水平菜单（例如“菜单C”）有更多项到达视图的右边缘时，它将跳到视图的左边缘-此外，如果产生了更多菜单，当它们到达“菜单A”的底部时，它们将跳到“菜单A”下方。

我如何才能使所有其他菜单（菜单B，C，D等）停留在“菜单A”的右侧，而从不进入其下方？

请记住，每个菜单都递归地调用该组件，因此容器及其内容（每个菜单和项目）是动态重新生成的，因此这是CSS预期中的棘手部分。 / p>

这是模板（HTML）代码：

    <!--
        This is the first/base/root or the next selected switchboard menu.
        If it has .subMenuItems[] - ynBaseItemHasSubMenus,
        its sub-menu-items are the items/buttons of the menu
    -->
    <div [class]="swbPosClass"
        [style.margin-top]="swbMarginTop"
        [style.margin-left]="swbMarginLeft">

        <!-- container of one given menu - including title -->
        <div *ngIf="baseMenuItem" 
                [class]="menuContainerClass">

            <!-- This is the header/title of the menu - comes from:
                baseMenuItem.displayName -->
            <div *ngIf="showMenuTitle && baseMenuItem.displayName"
                        [class]="headerClass"
                        (click)="clearChild()">
                <!-- <span>{{baseMenuItem.displayName}} - L: {{level}}, {{menuPos}}</span> -->
                <span>{{baseMenuItem.displayName}}</span>
                <!-- This is a link/small icon to menu options -->
                <span class="menu-icon" (click)="openSwbOptionsDialog()">&#10702;</span>
            </div>
            <!-- Base container for menu items - they come from .subMenuItems[] 
                This div serves as container for the Tree menu items
                and for the NON-tree menus this div allows this css:
                    .menuContainer-V { display: table;   }
                display table properly - items are NOT stretched accross the screen,
                instead, all items are sized equally to the width of the item
                with longest content. 
            -->
            <div *ngIf="ynBaseItemHasSubMenus">


                <!-- Menu items container (for items without title)
                    arrange the menu items per the specified layout - H, V -->
                <div [class]="menuItemsContainerClass">
                    <!-- menu items   temp use: class="tmp4" -->
                    <div *ngFor="let item of baseMenuItem.subMenuItems; index as itemIx"
                                [class]="menuItemClasses"
                                (click)="onItemSelected(item)">
                        <mat-icon *ngIf="item.iconName"> {{item.iconName}} </mat-icon>
                        {{item.displayName}}
                    </div>

                </div>
            </div>
            <!-- doc:
                routedOutletPos:  Position options for the  menu (item's) target pages
                    1 - pages are displayed below or right from the last sub-menu,
                        according to the values of: menuPositioning.
                        The switchboard menus are remain shown / visible.
            -->
            <div *ngIf="isRoutedItem && routedOutletPos === 1">
                <router-outlet></router-outlet>
            </div>

        </div>
    </div>

    <!-- doc:
        For H or V (horizontal/vertical menus)
        while we have sub-menu items we create sub-menus;
        nested / recursive sub-menus based on users selection in prev. level item.
        DANGER !!! DO NOT REMOVE: *ngIf="ynRecurse"
        IT WOULD CAUSE ENDLESS LOOP - RESOURCES DEPLETED DANGER / BROWSER/SYSTEM CRASH
    -->
    <!-- <div *ngIf="ynRecurse" [class]="swbPosClass"> -->
        <libtw-switchboard-a01 *ngIf="ynRecurse"
            [baseMenuItem]="selectedItem" 
            [ynRecurse]="false"
            [level]="level">
        </libtw-switchboard-a01>
    <!-- </div> -->


    <!-- doc:
    routedOutletPos:  Position options for the  menu (item's) target pages
        2 - pages are displayed below the entire menu structure
            - below all sub-menus.
            The switchboard menus remain shown / visible.
    -->
    <div *ngIf="isRoutedItem && routedOutletPos === 2">
        <router-outlet></router-outlet>
    </div>

如何使子菜单停留在基本菜单的右侧？

0 个答案: