时间戳

首页 > 解决方案 > 如何以角度制作 RTL 菜单

html - 如何以角度制作 RTL 菜单

问题描述

嗨，我正在学习 Angular 我刚刚制作了一个有角度的面板，但我希望它是 Rtl 但我不知道该怎么做这是我的面板 1

这是我的 HTML 代码

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <button mat-icon-button >
            <mat-icon>menu</mat-icon>
        </button>

        <span> Admin Panel </span>

        <div fxFlex fxLayout="row" fxLayoutAlign="flex-end">
            <ul fxLayout="row" fxLayoutGap="20px">
                <li>
                    <button mat-icon-button>
                        <mat-icon>settings</mat-icon>
                    </button>
                </li>
                <li>
                    <button mat-icon-button>
                        <mat-icon>help_outline</mat-icon>
                    </button>
                </li>
            </ul>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

这是我的CSS

ul li{
    list-style: none;
}

标签： htmlangular

解决方案

你的意思是这样的吗？ 在此处输入图像描述

代码：

<mat-toolbar color="primary">
    <mat-toolbar-row fxLayout="row-reverse">
        <button mat-icon-button (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <span> Admin Panel </span>
        <span fxFlex="1 1"></span>
        <button mat-icon-button>
            <mat-icon>settings</mat-icon>
        </button>
        <button mat-icon-button>
            <mat-icon>help_outline</mat-icon>
        </button>
    </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav #sidenav position="end">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    Sidenav content
  </mat-sidenav-content>
</mat-sidenav-container>

在你的使用fxLayout="row-reverse"-property<mat-toolbar-row>

这是一个堆栈闪电战： https ://stackblitz.com/angular/kgnvebakmpj

仅供参考，如果您只有一个工具栏行，则可以省略<mat-toolbar-row>.

推荐阅读