Как уменьшить ширину боковой панели? - PullRequest
Новая
       30

Как уменьшить ширину боковой панели?

0 голосов
/ 05 апреля 2020

Я использую ngx-admin и у меня есть вопрос, связанный с тем, как я могу динамически уменьшить размер боковой панели. Также, когда я сверну браузер, боковая панель должна автоматически изменять размер в соответствии с размером браузера. (Должно быть отзывчивым).

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Я нашел свой ответ на это. Я изменяю файл one-column.layout.s css на этот. 

   @import '../../styles/themes';
   @import '~bootstrap/scss/mixins/breakpoints';
   @import '~@nebular/theme/styles/global/breakpoints';

   @include nb-install-component() {
       .menu-sidebar ::ng-deep .scrollable {
           padding-top: nb-theme(layout-padding-top);
      }
   }

   @include nb-install-component() {
      .menu-sidebar ::ng-deep .main-container.main-container-fixed {
          width: 10rem;
    }
  }

  @include nb-install-component() {
   .expanded {
        width: 10rem;
   }
 }

и меняю файл one-column.layout.ts на этот 

import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { NbLayoutComponent } from '@nebular/theme';
import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';

@Component({
selector: 'ngx-one-column-layout',
styleUrls: ['./one-column.layout.scss'],
template: `
 <nb-layout windowMode>
   <nb-layout-header fixed>
     <ngx-header></ngx-header>
   </nb-layout-header>

  <nb-sidebar state="expanded" class="menu-sidebar" style="width: 'auto'" tag="menu-sidebar" responsive>
    <ng-content select="nb-menu"></ng-content>
  </nb-sidebar>

  <nb-layout-column>
    <ng-content select="router-outlet"></ng-content>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <ngx-footer></ngx-footer>
  </nb-layout-footer>
</nb-layout> ` })

    export class OneColumnLayoutComponent implements AfterViewInit {
     @ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;

    constructor(
     @Inject(PLATFORM_ID) private platformId,
     private windowModeBlockScrollService: WindowModeBlockScrollService) {}

   ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.windowModeBlockScrollService.register(this.layout);
    }
  }
}
0 голосов
/ 06 апреля 2020

вы можете найти примеры моего ответа на демонстрационный код ngx-admin в реальном времени на github. Таким образом, вы можете использовать включенный layoutService из nebular, чтобы сделать боковую панель отзывчивой. Пример: 

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
    <nb-menu [items]="YourItems"></nb-menu>
  </nb-sidebar>

, а затем сделать кнопку для переключения между развернутым, сжатым и свернутым. Вот кнопка и ее код, чтобы переключаться и автоматически позаботиться об отзывчивости. 

<a (click)="toggleSidebar()" class="sidebar-toggle">
            <nb-icon icon="menu-2-outline"></nb-icon>
        </a>

и затем в вашем файле ts используйте сервис макета: 

 import { NbSidebarService } from '@nebular/theme';
  import { LayoutService } from '../../@core/utils';


constructor(private layoutService: LayoutService, private sidebarService:NbSidebarService){}

toggleSidebar() {
    this.sidebarService.toggle(true, 'menu-sidebar');
    this.layoutService.changeLayoutSize();
    return false;
  }

Наконец, чтобы решить для Ширина боковой панели просто зарегистрируйте их с переменными в примере темы по умолчанию: 

@import "~@nebular/theme/styles/theming";
@import "~@nebular/theme/styles/themes/default";

$nb-themes: nb-register-theme(
  (
     sidebar-width: 16rem,
     sidebar-width-compact: 3.5rem
  ),
  default,
  default
);
...