2

我正在为我的 Angular 应用程序使用 Nebular，目前我试图弄清楚如何仅在一个页面上覆盖一个组件的主题设置，并使用原始设置在其他地方使用该组件。

示例： (nb-sidebar) 这用作位于屏幕左侧的菜单侧边栏。但我也将一个放在右侧，用于不同的目的。

他们俩目前都在继承主题值。所以我可以进入 theme.scss 并重新调整组件的大小，但它当然会影响两个侧边栏。我只想重新调整右侧的大小！我试图在我自己的 [component].scss 中用以下内容覆盖它：

nb-sidebar,
nb-sidebar > .expanded {
  width: 23rem;
}
nb-sidebar,
nb-sidebar > .collapsed {
  width:0px;
}

以及上面的许多其他变体都没有成功。

其他组件如nb-card等没有问题可以改变。更改侧边栏上的背景颜色等其他功能也没有问题。但是宽度......不。

有什么建议么？问候

4

3 回答 3

2

我遇到了完全相同的问题，最后通过将以下内容添加到styles.css：

.right-sidebar div.main-container.main-container-fixed {
      width: 20vw !important;
}
//adjust the margin as well to keep the sidebar in the viewport
.right-sidebar {
     margin-left: 80vw !important;
 }
于 2020-06-17T13:01:25.127 回答
1

根据此处的文档。

  1. 在themes.scss 文件上启用自定义属性

$nb-enable-css-custom-properties: true;

  1. 创建一个css类并访问侧边栏主题变量sidebar-width

     .ticketViewSideBar {
   --sidebar-width:22rem;
 }

  2. 然后在你的 html nbsidebar 组件上使用 class

    <nb-sidebar class="ticketViewSideBar" right="true" > //some code here </nb-sidebar>
于 2021-03-05T04:51:20.333 回答
1

假设您有具有以下 HTML 的应用程序组件：

<nb-layout>
  <nb-sidebar>Menu</nb-sidebar>
  ...
  <nb-sidebar class="right-sidebar">...</nb-sidebar>
</nb-layout>

注意right-sidebar第二个侧边栏上的课程。现在您可以通过nb-sidebar.right-sidebar选择器仅定位第二个侧边栏并根据需要设置样式，例如：

nb-sidebar.right-sidebar {
  width: 100px;
}
于 2019-12-16T16:45:29.410 回答