javascript - Angular 2 应用程序和静态 html 页面之间共享的 Material Design CSS/JS

标签 javascript html css material-design angular-material2

我们的 Angular 2 应用程序使用 Material Design 框架。该应用程序最终将作为嵌入式软件上的本地服务(无服务器)网络应用程序。由于应用程序中几个地方的加载时间,我们发现在某些情况下必须使用非 Angular 静态 html 来提高性能。

我希望我们的 UI/UX 程序员能够在静态 html 页面中使用尽可能多的以 md 为前缀的组件和 CSS/JS 动画。换句话说,我希望他们能够像在 Angular 2 模板中编写代码一样,或尽可能接近地编写静态页面上的 UI。

我还希望他们对 CSS 或 JS 所做的更改或任何自定义在 Angular 2 模板和静态 html 页面之间共享,因为它们应该具有相同的外观和感觉,并且看起来像是它们的一部分同一个应用。

我知道有多种方法可以在不使用 Angular 2 的情况下实现 Material 设计。(bootstrap、polymer 等)有没有人知道一种干净的方法可以在 Web 应用程序的 Angular 2 和非 Angular 部分之间无缝编码?

最佳答案

据我所知,有多种可用框架的 Material 设计 ( https://material.io/guidelines/) 实现。以下内容可以在静态 html 页面上使用,而无需像 Angular 2 这样的包罗万象的框架:

...仅举几例。我们决定采用的是 Polymer 实现。这是因为聚合物语法与 Angular 语法非常相似。 (均由 google 撰写)Polymer 前缀为“paper-”而不是“md-”,但在其他方面非常相似,我们可以将这两个前缀添加到 .scss 文件中的任何覆盖中,这些文件可以在 Angular 模板和当我们需要覆盖默认样式时的静态 html 文件。

虽然分离 Material Design 实现并不理想,但考虑到我们在应用中的某些页面需要静态 html 文件,这是一个可以接受的权衡。

如果有人有任何其他想法,仍然对这个问题的其他解决方案感兴趣。

关于javascript - Angular 2 应用程序和静态 html 页面之间共享的 Material Design CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41704702/

相关文章:

javascript - 单击选择中的选项标签时将类添加到祖 parent

javascript - 如何优化 pocketsphinx.js 中的阈值

javascript - 隐藏div元素的一部分

html - 删除每隔两行的边框底线

html - CSS - 即使属性相同,占位符文本也不同

javascript - 如何清除移动 SVG 线留下的痕迹?

php - Wordpress 上的奇怪消息

javascript - 使用MongoDb和Node.js来组织代码

javascript - 如何设置 react-stripe-checkout 表单的样式?

html - 我可以将 CSS 样式应用于元素名称吗?