angular - 如果我的布局中有两个侧边栏，如何设置 Nebular 的侧边栏宽度？

Question

所以我的页面布局中有两个侧边栏（标记为左和右），如下面的代码片段所示。我使用自定义主题方法并使用sidebar-width: 400px,属性设置侧边栏宽度。这样做是将侧边栏宽度设置为 400 像素。如何使右侧边栏为 700px？有没有办法通过 ID 来定位侧边栏宽度来实现这一点？

<nb-layout>
    <nb-layout-header>header</nb-layout-header>
    <nb-sidebar left state="collapsed" tag="left" >
    </nb-sidebar>
    <nb-sidebar right state="collapsed" tag="right">
    </nb-sidebar>
    <nb-layout-column>content</nb-layout-column>
</nb-layout>

标签： angulartypescriptnebularngx-admin

Answer 1

您可以通过为其主题css 变量分配新值来覆盖样式，这可以根据选择器进行设置（id 是其中之一）

查看星云侧边栏主题，您可以找到所有变量，您在这里寻找的是sidebar-width

所以你的风格可以是这样的

nb-sidebar[left]{
--sidebar-width: 400px;
}
nb-sidebar[right]{
--sidebar-width: 700px;
}