我试过很多方法。但没有工作。 期待这样的风格
ion-toolbar {
contain: none;
.toolbar-container {
overflow: visible; // not working
contain: none; // not working
}
}
有什么解决办法吗?
最佳答案
我使用新指令解决了这个问题:
ng generate directive allow-overflow
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appAllowOverflow]'
})
export class AllowOverflowDirective {
constructor(el: ElementRef)
{
let toolbar : HTMLElement = el.nativeElement;
setTimeout(() => {
let container : HTMLElement = toolbar.shadowRoot.querySelector(".toolbar-container");
if (container)
{
// (as any) is just to suppress a warning
(container.style as any).contain = "none";
container.style.overflow = "visible";
}
});
}
}
然后我添加了 <ion-toolbar>
像这样:
<ion-toolbar appAllowOverflow>
...
</ion-toolbar>
我还为 <ion-toolbar>
添加了这个 CSS 规则:
ion-toolbar[appAllowOverflow]
{
contain: none;
}
关于css - 在 ionic 4+ 中设置 ion-toolbar shadow dom 的 .toolbar-container 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65415518/