Я использую ngx-admin, и у меня есть вопрос, как динамически уменьшить размер боковой панели. Также, когда я сворачиваю браузер, размер боковой панели должен автоматически изменяться в соответствии с размером браузера. (Он должен быть отзывчивым).
Как уменьшить ширину боковой полосы туманности?
Ответы (2)
Я нашел на это свой ответ. Я меняю на этот файл one-column.layout.scss.
@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);
}
}
}
person
Milinda
schedule
06.04.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
);
person
alexandros nikoloulopoulos
schedule
06.04.2020