在Angular 8中,您可以使用PrimeNG 8的菜单组件来实现子菜单在溢出后显示在后面的效果。以下是一个使用PrimeNG菜单组件的示例:
npm install primeng primeicons
import { MenubarModule } from 'primeng/menubar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'primeng/resources/themes/nova-light/theme.css';
import 'primeng/resources/primeng.min.css';
import 'primeicons/primeicons.css';
Menubar
组件:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
menuItems: any[];
constructor() {
this.menuItems = [
{
label: 'File',
items: [
{
label: 'New',
items: [
{
label: 'Project'
},
{
label: 'Other'
}
]
},
{
label: 'Open'
},
{
label: 'Quit'
}
]
},
{
label: 'Edit',
items: [
{
label: 'Undo'
},
{
label: 'Redo'
}
]
}
];
}
}
在上面的示例中,我们定义了一个名为menuItems
的数组,其中包含菜单的层次结构。然后,我们将该数组绑定到Menubar
组件的model
属性上。
.container {
position: relative;
}
.ui-menu.ui-widget.ui-widget-content.ui-corner-all.ui-helper-clearfix.ui-menu-dynamic {
z-index: 1000;
}
在上面的CSS示例中,我们将容器的定位设置为相对定位,并使用z-index
属性将菜单的z-index值设置为较高的值,以确保它在溢出时显示在后面。
这样,当菜单的子菜单溢出容器时,它会显示在后面,并且不会被其他元素遮挡。
希望这可以帮助到您!