Web 材质组件与 Angular Material 2 [关闭]

2024-02-26

最近,MDL(Material Design Lite)项目的后继项目推出Web 的材料组件 https://github.com/material-components/material-components-web。它的目标之一是“与其他 JS 框架和库无缝集成”。

还有另一个项目角材料2 https://github.com/angular/material2它专门为 Angular (v2+) 提供材料设计组件。

这两个项目都在创建基于材料设计的用户界面组件。此外,它们具有相似的组件集ready https://github.com/angular/material2#available-features/不活跃的开发 https://github.com/material-components/material-components-web/tree/master/packages,以及即将推出的相同组件集(列出here https://github.com/angular/material2#available-features and ).

有人可以帮助我了解两个项目之间的重叠以及我应该为新项目选择哪一个吗?

从根本上讲,我确实理解 Angular Material2 将与 Angular 项目更加无缝、紧密地集成,而 Material Components for the Web 将提供可供多个 JS 框架使用的钩子。但我看不出重叠的原因以及哪一个将具有更大的动力(阅读更多组件)。


全面披露:我正在努力Web 的材料组件 https://github.com/material-components/material-components-web,所以我的观点可能有点偏见:)

TL;DR use whichever library helps you build your UI in the most efficient way possible, or use them side-by-side. Check out our angular2 integration example angular-mdc-web https://github.com/trimox/angular-mdc-web to see how to wrap a MDC-Web component using ng2.

Web Material Components(缩写)的目标MDC-Web),正如已经提到的,是为整个 Web 平台创建 Material Design 组件的规范实现。 Angular/material2 是一个优秀的库——Material Design 团队的许多人,包括我自己,都为它做出了贡献——但它排除了非 Angular2 应用程序。此外,非 Google 库和框架(例如 React、Aurelia、Vue 等)也有no官方解决方案以满足他们的需求。

话虽这么说,Angular2 属于我们“整个 Web 平台”的范围,因此我们绝对希望支持它。在这两个项目的现阶段,我们可能有一些您需要的组件,而 Angular/Material2 不需要,反之亦然。我鼓励您使用任何可以帮助您以最佳方式实现目标的库。这可能是 Angular/Material2,也可能是 MDC-Web,或者说实话,可能两者都是。例如,您可以使用我们选择的组件 https://github.com/material-components/material-components-web/tree/master/packages/mdc-select沿着material2的组件,事情应该工作得很好。正如 TL;DR 中提到的,角度 MDC 网络 https://github.com/trimox/angular-mdc-web是一个功能齐全的库,它将 MDC-Web 包装在惯用的 angular2+ API 中。

最后一点,MDC-Web 是唯一由 Material Design 团队自己开发的库。正因为如此,我们能够与编写 Material Design 规范的同一个人进行协作和迭代。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web 材质组件与 Angular Material 2 [关闭] 的相关文章

  • mat-error 不显示错误消息 角度 5

    问题是即使我将字段留空并移至另一个字段 也不会显示错误消息 我无法找到我在这里做错了什么 任何帮助将不胜感激 如果我在 onFormValuesChanged 上放置断点 它永远不会到达断点 我尝试过在构造函数内移动表单的构建部分 但没有任
  • 找不到 Angular Material 核心主题

    我已将 Angular Material2 包添加到我的项目中 但是 我在浏览器中收到以下警告消息 我创建了一个自定义 scss 文件并导入了包 但它仍然抛出警告消息 找不到 Angular Material 核心主题 大多数 Materi
  • 如何将浮动操作按钮带到应用程序之外并使其作为可见、可移动和可点击的后台服务运行?

    所以我需要我的应用程序有一个开关 当它打开时 应该创建一个 FAB 在主活动 应用程序关闭后 这应该像后台服务一样在所有其他应用程序上运行 因此 无论我触摸 FAB 的任何地方 它都应该是可点击 可移动的 并且应该覆盖所有应用程序 看看以下
  • 动态地将输入宽度扩展为字符串的长度

    我正在尝试创建一个input至少在宽度上随着用户输入的字符串的长度动态扩展的字段 甚至可能是多行的 这可能吗 input https material angular io components input overviewAngular
  • 如何为与文本相关的 Angular Material 的 mdRadioButton 指令设置垂直对齐?

    如何设置垂直对齐mdRadioButton的指令Angular Material与文字有关 我都尝试过layout align and vertical align样式 但是单选按钮始终与文本相关居中对齐 here http plnkr c
  • 角度材质工具栏阴影

    我是材料2新手 我试图将主应用程序工具栏固定在屏幕顶部 问题是标高无法正常工作 内容隐藏了工具栏的阴影 我 这是我的 HTML 代码 app content height calc 100 64px overflow auto
  • 转储 API 21 的 AppCompat

    因此 我正在创建一个 Lollipop 5 0 API 21 及更高版本的应用程序 对支持旧设备的兴趣为零 在使用 UI 元素和布局 侧边栏又名导航栏 墨水等 等 Material Design 时 我是否仍然需要 appcompat 库
  • 材质按钮上的圆角

    我正在遵循以下问题的提示this https stackoverflow com questions 26346727 android material design button styles创建一个像 Material Design 中
  • 主题应用程序中的样式 SnackBar

    我需要帮助 如何更改样式应用程序中小吃栏中文本的设计 我对代码的更改不感兴趣 我找到了以下代码 但这对我不起作用 这是为什么 我的主题源自 style Theme AppCompat Light DarkActionBar 我将非常感谢您的
  • 如何使mat-select始终在angular2中的表单字段下打开?

    我需要角度材料垫选择组件在其表单字段的正下方打开 但它会打开所选选项位置上的下拉菜单 并且容器会根据所选选项稍微移动到顶部 有没有办法打开表单字段正下方的下拉容器 该行为是由 Material Design 规定的 您可以使用以下命令关闭所
  • 如何突出显示Recycler View中选定的Item?

    我有一个回收站视图 其中包含从内部存储加载的图像 我想在单击时突出显示所选项目 我尝试了很多东西但没有成功 实际上 我需要的是 当我单击回收器视图中的任何项目时 该项目必须进入我的ArrayList 并且它也应该突出显示 并且当我单击或取消
  • fab风格钻石如何使用?

    How to use diamond style for fab bottom app bar In the sketch files on the website https material io tools theme editor
  • 透明卡片,但具有仰角阴影效果

    我在制作透明白色卡片 不透明度 0 4 时遇到问题 但是 带有来自高程效果的阴影 如果我删除高程 则不会有阴影效果 并且卡片看起来是透明的 但是 如果我添加一些高度 透明效果就会被破坏 这是我尝试过的 Widget cardMenu Str
  • Materialise CSS 侧面导航不起作用

    我已经对 Materialise 运行进行了基本设置 除了滑出侧面导航之外 一切似乎都很好 这是我的代码 菜单 ul class right hide on med and down li a class dropdown button h
  • Angular 4:响应式网格列表

    昨晚开始探索 Angular 4 我只是想知道是否有办法使mat grid listMaterial Design 组件响应式与 Boostrap 如何处理它一样简单 任何人 提前谢谢您 不是纯 html 不过你可以找到一些 html ts
  • 如何从屏幕上的任意位置拖动底页?

    我正在尝试实现类似 YouTube 的体验 并允许用户从屏幕中的任何位置拖动底部工作表 我尝试了很多解决方案没有任何帮助 我终于从这个解决方案中找到了解决方案在外部区域达到阈值后允许 BottomSheet 向上滑动 https stack
  • 如何实现google paper按钮效果

    谷歌的纸张 材料设计http www google com design spec material design introduction html http www google com design spec material des
  • 带有 API 21 的 Snackbar

    我正在尝试在我的应用程序中实现新的 Snackbars 但我做不到 首先 我从以下位置下载了 zip 文件这个 SnackBarSampleActivity https github com nispok snackbar blob mas
  • 横向推荐的材料设计工具栏高度是多少

    对于全息设计 根据 Jake Wharton 的说法 景观期间建议的操作栏高度为 40dp https stackoverflow com a 7181591 72437 https stackoverflow com a 7181591
  • 如果布局中有两张卡,则第二张卡下方没有阴影/高程。为什么?

    我有2个cards在一个单一的RelativeLayout 问题是第二张卡下方没有高程或阴影 请参阅此处的屏幕截图 截屏 https i stack imgur com oOWIT jpg 这是我在 xml 文件中所做的

随机推荐

  • 无状态协议是否比有状态协议更适合使用?

    我可以看到 有状态的协议可以减少像 cookie 这样的 模拟状态 但是测试变得更加困难 以确保您的实现正确并重新连接 并且会话继续可能很难处理 始终使用无状态协议是否被认为是更好的做法 或者它确实是特定于领域的 我认为在处理有状态协议时身
  • 从 webview 的 Javascript 界面更新 UI 会使应用程序崩溃

    我正在开发混合网络视图 本机应用程序 并且遇到了应用程序崩溃的问题 以下是简要概述 应用程序位于单个 FrameLayout 中 顶部有一个 LinearLayout 我在左侧和右侧放置一个按钮 在中间和下面放置我的应用程序徽标 我有我的
  • MySQL插入语句队列

    我们正在构建一个 ajax 应用程序 其中用户输入被提交到 php 脚本进行处理 我们目前正在将每个请求写入日志文件以进行跟踪 我想将此跟踪移至数据库表中 但我不想在请求后运行插入语句 我想做的是建立一个需要在 MySQL 数据库上处理的事
  • 将 SweetAlert2 与 TypeScript 结合使用,找不到模块“sweetalert2/dist/sweetalert2.js”的声明文件

    我正在将我的一个项目迁移到 TypeScript 在该项目中甜蜜警报2 https sweetalert2 github io 使用库 导入 SweetAlert2 JS 和 CSS 的默认方式是 import Swal from swee
  • 数据库表和面向对象的类之间有关系吗?

    每次我编程时 我都会认识到类和表之间的这种关系 或者是我的想象 您可以为每个数据库表一个类或每个类一个表 即 tables customer products order classes customer products order ma
  • 如何将自定义参数传递给 Locust 测试类?

    我目前正在使用环境变量将自定义参数传递给我的负载测试 例如 我的测试类如下所示 from locust import HttpLocust TaskSet task import os class UserBehavior TaskSet
  • SwiftUI iOS14 GeometryReader 无效的框架尺寸

    我的 GeometryReader 在 iOS13 中工作正常 但现在在 iOS14 中出现线程问题 框架尺寸无效 负或非有限 我打印了读者应该返回的尺寸 看起来不错 该应用程序仍然基本上可以工作 但看起来有点奇怪 因为引入了一些填充 有谁
  • Node.js:如何为 prod 和 staging 设置不同的变量

    我正在使用 Express 并且需要为每个服务器 登台和生产 使用不同的凭据 我可以在 server coffee 文件中设置变量 但随后我需要访问不同文件中的这些变量 server coffee app configure product
  • 我可以在 EJS 中渲染多个源吗

    我尝试使用来自 2 个不同源的数据 但使用 EJS JS 和 Node 将它们呈现在同一个 HTML 页面上 这就是我正在尝试的 app set view engine ejs app get function req res res re
  • 无法建立新连接

    import requests url http ES search demo com document record search pretty true data query bool must text record document
  • 谷歌地图缩放看起来很奇怪

    我遇到了 Google 地图问题 除了缩放按钮似乎混乱之外 一切似乎都正常 Here is an image of the map 我猜有些东西是重叠的 但我不太确定 看来我来晚了 还是想分享一下我的想法 编辑库的核心 CSS 并不是一个好
  • 如何使用 GLFW 轮询 libdispatch 块中的事件?

    跟进答案如何将 GLUT 与 libdispatch 一起使用 https stackoverflow com q 12553563 64860 我现在改用 GLFW 以下代码设置一个窗口 设置一个计时器来轮询事件 并随着时间的推移将渲染更
  • 将值添加到空 Swift 数组

    我不知道如何在 Swift 中向空数组添加值 我尝试以两种不同的方式从空数组开始 var emptyArray Int emptyArray Int and var emptyArray 顺便问一下 这两种创建空数组的方式有什么区别 我尝试
  • 如何使用appledoc生成类似Apple的文档

    我正在阅读如何生成类似 Apple 的 HTML 文档的文章 here http gentlebytes com appledoc docs examples basic 我的问题是命令行的用途 我们如何将命令行和 appledoc xco
  • Outlook JS Addin - 撰写表单 - 如何检查事件/消息是否已保存?

    Outlook 加载项 office js 的撰写表单中是否有一种方法可以检查表单后面的对象 在我的例子中是日历事件 是否已保存 检查物品ID 如果未定义 则消息未存储 如果存在 则消息来自草稿 请参阅Office context mail
  • Process.GetProcesses 返回所有登录用户的进程?

    在允许多个用户同时登录一台机器的windows环境中 当我们调用Process GetProcesses 它是否返回进行此调用的登录用户的进程 还是返回所有登录用户的进程 我查看了 MSDN 页面 但找不到此信息 该函数返回本地计算机上运行
  • socket.error[Errno 99] 无法分配请求的地址

    昨天 我创建了一个名为的 python 脚本sniffer ip header decode py 但我遇到了以下错误 Traceback most recent call last File sniffer ip header decod
  • 通过 (...) 时避免参数重复

    考虑功能 f lt function x X mean c x X 我怎样才能自动 通过操纵f 更改签名f 这样它就可以与lapply 即不返回以下明显的错误 lapply X list 1 FUN f X 1 Error in lappl
  • XMLHttpRequest:浏览器支持 sendAsBinary?

    Firefox 是唯一支持 sendAsBinary 方法的吗 目前 我相信只有 FF3 支持此功能 尽管有一个解决方法 http code google com p chromium issues detail id 35705 for
  • Web 材质组件与 Angular Material 2 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 最近 MDL Material Design Lite 项目的后继项目推出Web 的材料组件 http