Перезаписать тему Nebular для одного компонента

Я использую Nebular для своего приложения Angular, и в настоящее время я пытаюсь выяснить, как перезаписать настройки темы для одного компонента только на одной странице, используя компонент в других местах с использованием исходных настроек.

Пример: (nb-sidebar) Используется как боковая панель меню, расположенная слева от экрана. Но я также поместил один с правой стороны, используемый для другой цели.

Оба они в настоящее время наследуют значения тем. Итак, я могу зайти в themes.scss и изменить размер компонента, но, конечно, это повлияет на обе боковые панели. Я хочу изменить размер только правой! Я попытался перезаписать это в моем собственном [component] .scss примерно таким:

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

И многие другие варианты вышеперечисленного безуспешно.

Остальные компоненты, такие как nb-card и т. Д., Поменять нетрудно. Также нет проблем с изменением других функций, таких как цвет фона на боковой панели. А вот ширина ... нет.

Какие-либо предложения? С Уважением


angular sidebar sass nebular
person Albin Pettersson    schedule 04.12.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

У меня была точно такая же проблема, и, наконец, она заработала, добавив в 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;
 }
person opp    schedule 17.06.2020

arrow_upward
1
arrow_downward

Предположим, у вас есть компонент приложения со следующим 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;
}
person ArtemRomanovsky    schedule 16.12.2019
comment
Привет, спасибо за ответ. Это не работает. Мне удалось увеличить саму боковую панель, но в настоящее время я не могу работать с контентом. ‹Div id = settings-sidebar ...› // width: 25rem ok ‹nb-sidebar ...› // width: 16rem ‹- ‹whatever› content ‹/whatever› ‹/nb-sidebar› ‹/div› @include nb-install-component () {# settings-sidebar {.expanded {width: 25rem; }}}. Независимо от того, что {width: 25rem} или подобное не работает, также попытался стилизовать автоматически сгенерированные классы. Все еще перезаписаны небулярными темами боковой панели: sidebar-width: 16rem. - person Albin Pettersson; 18.12.2019

arrow_upward
1
arrow_downward

На основе документации здесь.

  1. Включите настраиваемые свойства в файле themes.scss

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

  1. Создайте класс css и получите доступ к боковой панели боковой панели переменной темы- ширина

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

  2. Затем используйте класс в своем компоненте html nbsidebar

    <nb-sidebar class="ticketViewSideBar" right="true" > //some code here </nb-sidebar>
person Arjohn21    schedule 05.03.2021