一本正经的胡说八道，我信了你的鬼

标签：Splitter angular Material Angular 我信 组件 import 胡说八道 一本正经

angular怎么做splitview

在Angular中创建Split View可以使用Angular Material的Splitter组件。Splitter是一个带有可调整大小的分隔符的容器，使用户可以通过拖动分隔符来调整两个子组件之间的大小。

下面是使用Angular Material的Splitter组件创建Split View的步骤：

1. 首先，确保你已经安装并导入了Angular Material库。可以在你的项目中的app.module.ts文件中添加以下代码来导入Angular Material库：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatSplitterModule } from '@angular/material/splitter';
   import { AppComponent } from './app.component';
   
   @NgModule({
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       MatSplitterModule
     ],
     declarations: [AppComponent],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

2. 在你的组件模板中添加Splitter组件。可以使用两个子组件包含在Splitter中。以下是一个简单的示例：

   <mat-splitter>
     <mat-splitter-content>
       <!-- 第一个子组件 -->
     </mat-splitter-content>
     <mat-splitter-content>
       <!-- 第二个子组件 -->
     </mat-splitter-content>
   </mat-splitter>

3. 为Splitter添加样式和设置大小。可以使用CSS来设置Splitter的大小和样式。以下是一个示例：

    

   mat-splitter {
     height: 500px;
   }
   
   mat-splitter-content {
     background-color: #f0f0f0;
     padding: 20px;
     box-sizing: border-box;
   }

4. 保存并运行应用程序，然后试着拖动分隔符来调整子组件之间的大小。

这就是使用Angular Material的Splitter组件创建Split View的基本步骤。你可以根据你的需要进行调整和修改。

   

标签：Splitter,angular,Material,Angular,我信,组件,import,胡说八道,一本正经
From： https://www.cnblogs.com/yunteng/p/17268437.html