MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
React Vue Angular 其他
组件
工具函数
独立包

Angular

在 Angular 中使用 mdui 时,首先需要按照 安装 页面的指引完成安装,然后进行一些必要的配置。

配置

首先,我们需要在 Angular 中启用 Web Components 的支持。示例如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

配置完成后,我们就可以在 Angular 组件代码中引入并使用 mdui 组件了:

import { Dialog } from 'mdui/components/dialog.js';

@Component({
  selector: 'app-dialog-example',
  template: `<div id="page">
    <button (click)="openDialog()">Open Dialog</button>
    <mdui-dialog #dialog primary="Dialog Title">Dialog Content</mdui-dialog>
  </div>`
})
export class DialogExampleComponent implements OnInit {

  // 使用 @ViewChild 获取 #dialog 元素的引用
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // 使用 nativeElement 访问 mdui 组件
    this.dialog?.nativeElement.open = true;
  }
}
本页目录