在 Angular 页面之外使用 Angular Material 类 [英] Using Angular Material classes outside Angular pages

问题描述

我们正在重建我们的 Web 应用程序，并选择使用 Angular 作为前端框架，使用 Google Material 作为主要风格概念，因为它简单且流行.

We are rebuilding our web application and have chosen to use Angular as frontend framework and Google Material as main style concept because it is simple and popular.

我们的大部分页面都将成为 Angular 应用程序的一部分，但有些则不是.我们希望在应用程序的任何页面上使用相同的类/样式和主题，并避免代码重复.

Most of our pages will be part of Angular application but some will be not. We want to use the same classes/styles and theme at any page of our application and avoid code duplication.

主要问题是:如何在没有 Angular 的页面上使用 Angular Material 工具包中的 Material Design 类?我们还没有找到完整的 Angular Material CSS 文档来简单地将 CSS 链接与库和我们的主题附加到静态"页面.

The main question is: how to use Material Design classes from Angular Material toolkit on pages without Angular? We've not found complete Angular Material CSS documentation to simply attach CSS link with library and our theme to "static" page.

谢谢！

推荐答案

没有关于

在 Angular 页面之外使用 Angular Material 类

Using Angular Material classes outside Angular pages

因为 Angular Material 不打算用作样式/脚本工具包".它是 Angular 应用程序框架平台的组件库.它是通过使用自定义组件、指令等来实现的，而不是通过将类应用于标准 HTML 来实现的.

because Angular Material is not intended to be consumed/used as a style/script 'toolkit'. It is a component library for the Angular application framework platform. It is implemented by using custom components, directives, etc. and not by applying classes to standard HTML.

例如，Angular Material 表单字段不是通过以下方式创建的:

For example, an Angular Material form field is not created with:

<div class="mat-form-field">...</div>

它是通过以下方式创建的:

it is created with:

<mat-form-field>...</mat-form-field>

当然不能在 Angular 之外工作.

which of course won't work outside Angular.

话虽如此，样式就是样式，CSS就是CSS，只要导入到页面中就可以应用到任何东西上.所以 <div class="mat-form-field">...</div> 可能会做一些事情，但它不太可能做你想要它做的事情- 结果会有很大差异.主要的一点是 class="mat-form-field" 除了使用 <mat-form-field> 生成之外，并没有被设计用来工作.库的所有其余部分也是如此(对于某些组件的特定功能，可能会有一些例外 - 不确定 - 但组件文档会注意到这一点).

That being said, style is style, CSS is CSS, and it can be applied to anything as long as it is imported into the page. So <div class="mat-form-field">...</div> will probably do something, but it is unlikely that it will do what you might want it to do - results will vary widely. The main point is that class="mat-form-field" is not designed to work other than when produced by using <mat-form-field>. Ditto for all of the rest of library (there might be a few exceptions to this for specific features with certain components - not sure - but the component documentation would note this).

正式记录如何做某事需要针对该用途进行设计和支持.这显然不是这里的情况，所以这就是没有任何官方文档的原因.

Officially documenting how to do something requires that it be designed and supported for that use. That obviously isn't the case here, so that's why there isn't any official documentation.

一个例外是 Angular Material 的排版类，它可以用作常规 HTML 的类，因此是 记录.

An exception to this is Angular Material's typography classes which can be used as classes for regular HTML, and accordingly is documented.

这篇关于在 Angular 页面之外使用 Angular Material 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！