[英]flexLayout in Angular Toolbar<mat-toolbar>
我在我的angular 5应用程序中使用flexLayout。 这是下面的代码。 如您所见,我想在mat-toolbar和按钮之间使用flex布局。 但是我没有得到想要的输出。 请查看下面的截图以获取结果。
<mat-toolbar color="primary">
<div fxLayout="row">
<div fxFlex="25%">
<button mat-raised-button color="primary">
<b>Home</b>
</button>
</div>
<div fxFlex="25%">
<button mat-button>
<mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
</button>
</div>
<h1 fxFlex="25%">Dashboard</h1>
<div fxFlex="25%">
<button mat-raised-button color="primary">
<b>Add App</b>
</button>
</div>
</div>
</mat-toolbar>
编辑:包含app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppMaterialModule } from './app-material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
ToolbarComponent
],
imports: [
BrowserModule,
AppMaterialModule,
FlexLayoutModule,
BrowserAnimationsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
请帮忙。
谢谢
如果您将添加mat-toolbar-row而不是div,则可以使用
<mat-toolbar color="primary">
<mat-toolbar-row>
<div fxFlex="25%">
<button mat-raised-button color="primary">
<b>Home</b>
</button>
</div>
<div fxFlex="25%">
<button mat-button>
<mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
</button>
</div>
<h1 fxFlex="25%">Dashboard</h1>
<div fxFlex="25%">
<button mat-raised-button color="primary">
<b>Add App</b>
</button>
</div>
</mat-toolbar-row>
</mat-toolbar>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.