在由 nebular 开发的 ngx-admin 中将侧边栏更改为 RIGHT

Question

我必须将 ngx-admin 设置为 RTL 样式。我必须在右侧设置侧边栏。经过一些研究，在这个 Github 项目中没有找到任何解决方案。任何人都可以帮我解决这个问题。

Answer 1

如果您在他们的演示站点 (http://akveo.com/ngx-admin/pages/dashboard) 上检查元素，您可以看到 layout-container class 使用 flexbox.

// more code ...
<div _ngcontent-cch-c3="" class="layout-container">
  <nb-sidebar _ngcontent-cch-c1="" class="menu-sidebar start expanded"
    responsive="" tag="menu-sidebar" _nghost-cch-c6="">
// more code...

要将侧边栏设置在右侧，请为 menu-sidebar class 中的 order 使用较高的值。在这种情况下，2 这里有效。

图片：

希望对您有所帮助。

Answer 2

把文件一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);




  }

  .menu-sidebar-rtl{
    order: 0 !important;
  }

  .menu-sidebar{
    order: 2 !important;
  }

}

并将文件一column.layout.ts更改为

import {Component, OnInit} from '@angular/core';
import {NbLayoutDirection, NbLayoutDirectionService} from "@nebular/theme";

@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 [ngClass]="sidebar_class" 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 OnInit {
  constructor(private  directionService: NbLayoutDirectionService) {
  }

  ngOnInit(): void {
    if ( this.layout_direction === NbLayoutDirection.RTL) {
      this.sidebar_class = 'menu-sidebar-rtl';
    }
  }

  layout_direction: NbLayoutDirection = this.directionService.getDirection();
  sidebar_class: string = 'menu-sidebar';
}

Answer 3

你应该做两件事：

1- 在 theme.module.ts 中：

    export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: "default",
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
          DEFAULT_MEDIA_BREAKPOINTS,

          NbLayoutDirection.RTL
        ).providers,
      ],
    };
  }
}

我们添加：

   DEFAULT_MEDIA_BREAKPOINTS,
   NbLayoutDirection.RTL

2- 对于侧边栏，将“开始”添加到：

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
    <ng-content select="nb-menu"></ng-content>
  </nb-sidebar>

Answer 4

您只需在标签上添加 'right' 字样：

<nb-sidebar state='collapsed' right class="menu-sidebar" tag="menu-sidebar" responsive end>
</nb-sidebar>

在由 nebular 开发的 ngx-admin 中将侧边栏更改为 RIGHT

change sidebar to RIGHT in ngx-admin that is developed by nebular

angular

nebular