要使用Angular Material UI以一行显示选项卡内容,可以使用Angular Material的Tab组件和Flex布局。
首先,确保已经安装了Angular Material和Flex布局:
npm install @angular/material @angular/cdk
npm install @angular/flex-layout
接下来,在Angular应用的模块中导入所需的模块:
import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
MatTabsModule,
FlexLayoutModule
],
...
})
export class AppModule { }
然后,在组件的模板中使用Tab组件和Flex布局来实现一行显示选项卡内容:
Tab 1
Tab 2
Tab 3
在上述代码中,mat-align-tabs="center"
属性用于将选项卡居中对齐。fxLayout="row"
属性用于将选项卡内容水平排列。
你可以根据需要自定义每个选项卡的内容。只需在注释下添加所需的HTML内容即可。
这样就可以使用Angular Material UI以一行显示选项卡内容了。