时间戳

首页 > 解决方案 > 我怎样才能把我的侧边栏放在页面的右侧有角度的？

angular - 我怎样才能把我的侧边栏放在页面的右侧有角度的？

问题描述

我正在尝试制作一个有角度的管理面板，但我有一个问题，我希望侧边栏位于页面的右侧（RTL），但我不知道该怎么做？这是我的侧栏 html 代码

<div>
<div lang="en" direction="rtl" dir="rtl" style="direction: rtl">
<mat-nav-list >
    <div class="profile-card">
        <div class="header">
            <h2>Personal Account </h2>
            <h4>info</h4>
        </div>
        <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Personal Account ">
    </div>
    <mat-divider></mat-divider>
    <h2 matSubheader>pages</h2>
    <a mat-list-item  routerLinkActive="list-item-active" routerLink="/" >Dashboard</a>
    <a mat-list-item  routerLinkActive="list-item-active" routerLink="/posts" >Posts</a>
    <a mat-list-item  routerLinkActive="list-item-active" routerLink="/articles" >Articales</a>

    <mat-divider></mat-divider>

    <h2 matSubheader >Tools</h2>
    <a mat-list-item  routerLinkActive="list-item-active" routerLink="/contacts" >
      <mat-icon>import_contacts</mat-icon>
      Contacts
    </a>

    <a mat-list-item  routerLinkActive="list-item-active" routerLink="/contacts" >
        <mat-icon>contact_phone</mat-icon>
        Leads
    </a>

</mat-nav-list>
</div>
</div>

这是我的仪表板代码

<div >
<div>
    Line charts
</div>

<mat-divider></mat-divider>

<div>
    <div>line chart</div>
    <div>line chart</div>
    <div>line chart</div>
    <div>line chart</div>
</div>

<mat-divider></mat-divider>

<div>
    <div>Table</div>
    <div>Pie Charts</div>
</div>
</div>

我找到了关于我使用行反转的标题的解决方案，它位于右侧

<mat-toolbar color="primary">
    <mat-toolbar-row fxLayout="row-reverse">

          <button mat-icon-button (click)="toggleSideBar()" >
          <mat-icon>menu</mat-icon>
        </button>

        <span>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>

          <button mat-icon-button >
            <mat-icon> 
              <button mat-button [matMenuTriggerFor]="menu">
            <mat-icon>person_outline</mat-icon>
          </button>
            <mat-menu #menu="matMenu">
             <button mat-menu-item>
                <mat-icon>exit_to_app</mat-icon>
                Sign out
             </button>
            </mat-menu></mat-icon>
        </button>

    </mat-toolbar-row>
</mat-toolbar>

你们能帮帮我吗，我真的不知道该怎么办？

这是一张图片 在此处输入图像描述

标签： angular

解决方案

dir="rtl" 将解决问题，但我认为您忘记在父 div 中添加 flex-layout 参数。所以把fxLayout="row"放到你的父 div

工作代码应该像

<div lang="en"  dir="rtl" fxLayout="row" fxLayoutAlign="start stretch">
    <mat-nav-list>
        <div class="profile-card">
            <div class="header">
                <h2>Personal Account </h2>
                <h4>info</h4>
            </div>
            <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Personal Account ">
        </div>
        <mat-divider></mat-divider>
        <h2 matSubheader>pages</h2>
        <a mat-list-item  routerLinkActive="list-item-active" routerLink="/" >Dashboard</a>
        <a mat-list-item  routerLinkActive="list-item-active" routerLink="/posts" >Posts</a>
        <a mat-list-item  routerLinkActive="list-item-active" routerLink="/articles" >Articales</a>

        <mat-divider></mat-divider>

        <h2 matSubheader >Tools</h2>
        <a mat-list-item  routerLinkActive="list-item-active" routerLink="/contacts">
          <mat-icon>import_contacts</mat-icon>Contacts
        </a>
        <a mat-list-item  routerLinkActive="list-item-active" routerLink="/contacts">
            <mat-icon>contact_phone</mat-icon>Leads
        </a>
    </mat-nav-list>
    <div>
        <!-- Put your dashboard content here -->
    </div>
</div>

工作 stackblitz 链接：https ://stackblitz.com/edit/angular-ivy-icnbwh

推荐阅读