Как отображать элементы mat-list слева направо

Question

При использовании Angular Материал mat-nav-list Я хочу, чтобы пункты списка login и logout располагались рядом друг с другом слева направо. Что мне делать?

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <span>Custom Toolbar</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <mat-icon class="example-icon">favorite</mat-icon>
        <mat-icon class="example-icon">delete</mat-icon>
        <span>User name</span>
        <span class="example-spacer"></span>
            <mat-nav-list>
                <a mat-list-item routerLink="login" >Login</a>
                <a mat-list-item routerLink="login" >Logout</a>
            </mat-nav-list>    
    </mat-toolbar-row>
</mat-toolbar>

Answer 1

Вы можете добавить немного CSS, чтобы сделать это. Вы можете прочитать о Flex CSS здесь: CSS Гибкая компоновка коробки - Основы c Основные понятия

<mat-toolbar color="primary">
  <mat-toolbar-row>
      <span>Custom Toolbar</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <mat-icon class="example-icon">favorite</mat-icon>
    <mat-icon class="example-icon">delete</mat-icon>
    <span>User name</span>
    <span class="example-spacer"></span>
    <mat-nav-list class="my-nav-list">
      <a mat-list-item routerLink="login" >Login</a>
      <a mat-list-item routerLink="login" >Logout</a>
    </mat-nav-list>
  </mat-toolbar-row>
</mat-toolbar>

.my-nav-list {
  display: flex;
  flex-direction: row;
}

Answer 2

Я использую angular flex для достижения этой раскладки, как вы также используете Angular материал, поэтому попробуйте это

    <div class="iq-actn" fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="10px" fxLayoutAlign="flex-start center">
     <a fxFlex matRipple>Log In</a>
     <a fxFlex matRipple>Log Out</a>
   </div>

Answer 3

Одним из решений было бы не использовать mat-nav-list и реструктурировать HTML следующим образом и использовать mat-button для ваших login и logout ссылок:

<mat-toolbar color="primary">
  <mat-toolbar-row>
      <span>Custom Toolbar</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <mat-icon class="example-icon">favorite</mat-icon>
    <mat-icon class="example-icon">delete</mat-icon>
    <span>User name</span>
    <span class="example-spacer"></span>
    <a mat-button routerLink="login">Login</a>
    <a mat-button routerLink="login">Logout</a>
  </mat-toolbar-row>
</mat-toolbar>

* mat-button Кажется, что директива больше подходит для того, что вы хотите, потому что они будут отображаться встроенными по умолчанию Обратите внимание на объяснение в Angular Документах по материалам на матовой кнопке , в котором объясняется, где следует использовать <button> вместо <a>. Если вы не собираетесь уходить со страницы, вместо этого следует использовать элементы <button>.

Добавление дополнительных CSS, как это предлагается в Mat-Nav-List по горизонтали вместо вертикали? хорошо, но если вы хотите избежать пользовательского CSS и использовать Angular сам материал, используйте mat-button.