Question

我对Angular还是非常陌生的/从UI设计方面入手，因此我对基本Angular概念的术语和理解有限。

我的团队已经开始使用Angular Material构建网站，作为设计师，我正在尝试确定如何在像Material这样的现成工具中受益，并需要大量定制（主要是样式）。

我想本质上在现有Material组件之上构建一个自定义库。我还想对它进行结构化，使其具有高度的模块化性-即，与其使用巨大的/整体的HTML和CSS文件进行操作，不如希望按钮具有单个，较小的组件等，并具有各自独立的HTML和CSS。

我试图做的就是将Angular Material组件包装到我创建的新组件中，就像这样：

button.component.ts：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.less']
})
export class ButtonComponent implements OnInit {
  @Input()
  color;
  disableRipple: boolean;

  constructor() {}

  ngOnInit() {}
}

button.component.html：

<button mat-button [color]="color" [disableRipple]="true">
  <ng-content></ng-content>
</button>

我知道我将不得不“传递”一些属性。还没走那么远。我遇到的问题是，我尝试解决此问题的方式导致了一个新的DOM元素“ ui-button”，我宁愿不使用它，因为它会引起焦点问题，等等。其他方式可以做到这一点？扩展角度材料组件的某种方法？

Answer 1

如果您的应用将遵守Material Design specification，则Angular Material组件已经实现了材料设计的最佳实践，通常不需要修改。

但是，如果您的应用程序的行为和外观与Material Design规范不同，则最好使用Component Dev Kit (CDK)。找到另一个库或开发自定义解决方案会更好。

组件开发工具包（CDK）是一组工具，这些工具可以实现常见的交互模式，而不必担心其表示方式。 它表示对Angular Material库中找到的核心功能的抽象，而没有任何特定于Material Design的样式。将CDK视为经过良好测试的功能的空白状态，您可以在该状态下开发自己的CDK定制组件。

如果最终使用Angular Material组件，则用于自定义的其他资源包括：

包装或扩展Angular Material组件以创建自定义组件

1 个答案: