2

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

4

4 回答 4

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>
于 2020-11-07T17:19:45.157 回答
1

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




  }

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

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

}

并将文件 one-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';
}
于 2019-09-03T07:29:45.920 回答
0

您需要做的就是在标签上添加“正确”字样：

<nb-sidebar state='collapsed' right class="menu-sidebar" tag="menu-sidebar" responsive end>
</nb-sidebar>
于 2021-06-16T05:22:26.603 回答
-1

如果您在他们的演示站点 ( http://akveo.com/ngx-admin/pages/dashboard ) 上检查元素，您可以看到layout-container该类使用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...

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

图片： 在此处输入图像描述

希望这可以帮助。

于 2019-09-02T10:39:36.863 回答