这是跨越整个平台(包括框架、Angular Material 和 CLI)的一次主要版本更新。这次的新版发布间隔比以往短一些。自我们发布 Angular 9.0 版以来只过去了四个月。...新版内容 新的日期范围选择器 Angular Material 现在提供了一个新的日期范围选择器。 ?...TypeScript 升至 TypeScript 3.9 TSLib 已更新至 v2.0 TSLint 已更新至 v6 我们还更新了项目布局。...我们已解决了 2,000 多个问题,并计划在接下来的几个月中投入大量资源,与社区合作做更多事情。 弃用和移除 Angular 新版增加了一些新的弃用和移除。...Angular Package Format 不再包含 ESM5 或 FESM5 包,在为 Angular 包和库运行 yarn 或 npm install 时,这可以节省 119MB 的下载和安装时间
它们提供了快速、经过良好编码的、有文档的、即用型的方案,你只需要使它们适应你的想法即可。开发速度是这里的关键,这就是为什么模板会成为创建应用的最合适工具。...使用 Bootstrap Material Design 框架构建。 惊人而流畅的动画。 很棒的通知和报警系统。 15 个内置插件,大量示例页面,5 组不同的图标。 最后更新大约在两周前。...多个插件,例如 React Table、Chart.js、React Datepicker 等。...更多信息:https://themeforest.net/item/gene-angular-2-material-design-admin-template/19877169 Demo:https:/...基于 Angular 9。 有 6 种不同布局和 10 种颜色样式的直观设计。 在 ThemeForest 上的评级为 4.97 星。 包含响应式表格、图表、日历,邮箱等应用程序。
在标准的 Android 库中,已经提供了 DatePicker 和 TimePicker 这两个组件来实现这个功能。然而,有时候我们需要更加自由度的定制日期选择器来满足特定的业务需求。...DatePicker datePicker = findViewById(R.id.date_picker);datePicker.init(2022, 5, 1, new DatePicker.OnDateChangedListener...CustomDatePickerTheme 主题,继承自 Widget.Material.Light.DatePicker 主题。...接下来,在我们的布局文件中,将 android:theme 属性设置为我们的主题名称即可。...接下来,在我们的布局文件中,将 android:theme 属性设置为我们的主题名称即可。
Angular v10 在六月下旬就悄无声息的发布了,虽然 v9 的发布延期了两个月,但是 v10 并没有受影响,仍然如期而至。...再来说一下 Angular Material, v10 有一个非常大的变化,就是增加了 datepicker 的区间选择功能,不用多说,这是一个极其实用的功能。...其实 v10 版本除了将 Angular 和 Angular Material 升级之外,主要是调整了 schematics ng add 的兼容问题,其它代码和 v9 最新版是一样的。...最终参考了 ngx-formly 的设计方案,每个文本都支持传入响应式数据流,以 ngx-translate 为例,通过 translate.stream 监听语言变化即可。...Material Extensions 扩展组件库的大部分组件都做了主题样式分离,从 9.11.0 之后必须要定义主题样式。熟悉 Material 组件库的朋友应该都不陌生。
Gentelella 5. ng2-admin 6. ant-design-pro 7. blur-admin 8. vue-admin 9. iview-admin 10. material-dashboard...可自定义管理面板,包括灵活的布局、主题、导航菜单、侧边栏等。 提供了部分电子商务模块:CMS, CRM, SAAS。 多风格,提供了3个前端风格,7个后端管理面板风格。 简洁扁平风格设计。...最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.4),当然,也集成了很多功能强大...Full Version Angular Seed Project Angular Seed Project Grunt Angular Seed Project Gulp Angular Seed...5. ng2-admin Github Star 数 13181, Github 地址: https://github.com/akveo/ngx-admin 基于 Angular 2, Bootstrap
https://vue-chartjs.org/ 演示 http://demo.vue-chartjs.org/ vue-fa FontAwesome5库的vue实现,可以调用FontAwesome5的各种组件...https://vue-multiselect.js.org/ vuejs-datepicker vue的日期选择组件。...https://github.com/charliekassel/vuejs-datepicker vue-md-editor vue的markdown编辑器。...https://vuetifyjs.com/ element-ui 基于vue 2.0的组件库,同时支持React和Angular。...http://element.eleme.io/ vue-material Google设计风格的UI组件库。
$mat-gray: $mat-grey; 灵活的主题定制 Angular Material 的样式几乎全部写在了 mixin 中,定制起来非常容易。...@include angular-material-theme($candy-app-theme); Angular Material 给出了多套主题的设置方法,只需要增加样式控制类就可以了。...($theme); @include matero-admin-theme($theme); } 工具集 Angular Material 提供了几乎所有和 Material Design 有关的样式工具...Material 一样了。...响应式布局 Angular Material 并没有布局组件。但是不用担心,官方出品了一款基于指令布局的神器 flex-layout,它是专门为 Angular 设计的。
matero-poster.jpg 前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。...经过一个多月的设计与思考,我开发了这款基于 Angular Material 的中后台管理框架,初期架构设计已经完成,在接下来的版本中会提供 schematics 支持及 vscode snippet...目录结构 先看一下目录结构,这个目录结构遵循了 Angular 的最佳实践,尽量保证结构的规范化与合理性。...框架的响应式布局系统采用了 Angular 官方提供的 flex-layout,包含 flex 以及 grid,确实非常好用。...: "link", "icon": "dashboard", "badge": { "color": "red-500", "value": "5"
addLessLoader} = require('customize-cra'); 2 3 module.exports = override( 4 fixBabelImports('import', { 5...; 5 6 export default class App extends Component { 7 render() { 8 return ( 9... 22 23 ) 24 } 25 } 4.备注:不用在组件里亲自引入样式了,...即:import 'antd/dist/antd.css'应该删掉 二、UI库 1. material-ui(国外) 官网: http://www.material-ui.com/#/ github:...https://github.com/callemall/material-ui 2. ant-design(国内蚂蚁金服) 官网: https://ant.design/index-cn Github
值得兴奋的是,就在 2022 即将过去时,Material Extensions 的周下载量终于破万了,六月份时这个数据还只是 5k+。从 0 到 5k 用了两年,而从 5k 到 1w 只用了半年。...Material 对齐了,同样要感谢外国友人的帮助。...基于 MDC 的 Angular Material 组件 我觉得 v15 最大的变化不是 Angular,而是 Angular Material。...详情参考官方文档 迁移到基于 MDC 的 Angular Material Components,里面详细介绍了组件的变化内容以及升级时的注意事项。...Flex-Layout 的响应式 API 确实非常强大,它的栅格不受限制,你可以使用 %、px 等任意单位设置响应式布局。
日期范围 自定义语言 自定义日期格式 支持夜间模式 使用 CSS 变量自定义样式 3.Material Vue DateRange Picker - 内置时间范围选择,选择更快捷 03-all-Material-Vue-DateRange-Picker...Material Vue DateRange Picker 自带时间范围选择,一键最后 7 天,最后 30 天,或者根据应用场景有针对性的设置一键选择范围。...日期范围选择器 时间选择器 日期选择器 没有 JQuery 依赖 灵感来自 Bootstrap 日期范围选择器 5....Airbnb Datepicker - Airbnb 风格,对移动端友好,多浏览器支持 07-all-Airbnb-Datepicker-Vue-Datepicker Airbnb Datepicker...日期时间选择器 12/24 小时制 日期选择器 时间选择器 自定义颜色 Vue Date Time Picker 时间选择器总结 本文推荐了我自己使用多年的 12 款最好用的 Vue Date Time
Material Design for Angular [Material.png] 首先要推荐的,当然是 Angular 官方的 Material 组件库,Material Design 是 Google...以下是2021年4月19日的数据: 指标 数值 Star 21.4k Fork 5.7k NPM周下载 891,480 Material Design for Angular早在2016年3月份就发布了第一个基于...Angular 2的Alpha版本:2.0.0-alpha.0,中间演进了一年多,迟迟没有发布2.0的正式版本,直到第二年12月才发布基于Angular 5的5.0.0正式版本。...不过 Material Design for Angular 却不是最早的 Angular 组件库,后面我们将要介绍的 PrimeNG 比它更早诞生,但 Material 毫无疑问是最流行和最受欢迎的。...作为Ant Design的Angular实现,NG Zorro不仅继承了Ant Design的独到思想和极致体验,同时也结合了Angular框架的优点和特性。
按照计划,首先要添加 schematics,也就是使用 angular cli 自动初始化项目。然后花了一周多的时间终于搞定了 schematics?。...切记在新建 angular 项目的时候一定要选择 scss,因为没有做兼容处理,选择其它格式会有点问题,可以在 angular.json 中修改主样式入口。...个人更倾向于在项目之前初始化布局,而不是项目启动后再更改页面布局的参数。 ? 页面布局分为侧边栏导航和顶部导航两种,其它细节可以根据自己的需要自由选择配置。 侧边栏导航 ? 顶部导航 ?...其它参数大家可以自己尝试一下,这里借鉴了 material 的参数项。 版本号 因为还有很多需要完善的地方,所以短期内不会发布正式版。...另外主题系统还不够灵活,样式编写需要向 material 学习,增强定制性,优先选择 mixin 编写。我会在之后的文章中介绍 material 的一些设计亮点。
5.Quasar 构建响应式网站,PWA,混合移动应用程序 打不开,应该是被墙了,无法评论,只有项目 6.Buefy 优点:时间选择器数字很大有特点 缺点:非中文文档 ? ? ? ? ? ? ? ?...20.vue-datepicker ? 21.vue-datepicker ? 22.vue-date-picker ★59 - VueJS日期选择器组件 ?...28.vue-html5-editor ★132 - html5所见即所得编辑器 ? 29.vue-simplemde ★35 - VueJS的Markdown编辑器组件 ?...39.Vueblu 比较简洁,各种角度的提供了过度动画 ? ? ? ? ? ? ? ? ? ? ? 40.Ant Design Vue ? ? ? ? ? ? ?...18.vue-waterfall ★605 - Vue.js的瀑布布局组件 四、一些项目 1.IFmiss / vue-music http://www.daiwei.org/vue-music.html
如今,Angular将继续这一改进的势头,发布了自Angular最初推出以来最大的一次版本更新;在Reactivity、服务器端渲染和工具方面取得了巨大的飞跃。...在过去的几个月里,Angular与ChromeAurora团队合作,改善了hydration和服务器端渲染的性能和DX。今天,Angular带来了完整应用非破坏性hydration的开发者预览。...在 Angular v16 中,我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 的新功能,该功能允许你为 Angular 内联的组件的样式指定 nonce 属性。...Design 团队密切合作,为 Angular Material 的 Web 提供了 Material 3 实现。...作为下一步,我们正在努力在今年晚些时候推出一个基于 expressive token-based 的主题化 API,该 API 支持 Angular Material 组件的更高定制。
去 angular.dev 看看吧!材料 3 现在稳定了!几个月前,我们引入了对 Material 3 的实验性支持。...在处理了开发人员的反馈并完善了我们的 Material 3 组件后,我们很高兴将它们升级为稳定版!...与此同时,我们还用新的 Material 3 主题和文档刷新了 material.angular.io。您可以在我们的指南中找到如何在您的应用程序中使用 Angular Material 3!...在接下来的几个月里,我们将继续根据你的反馈对实现进行迭代,直到我们将其升级为稳定版。...CDK 和 Material 中的水合作用支持在 v17 中,一些 Angular Material 和 CDK 组件被选择退出水合,这导致了它们的重新渲染。
components star:15.8k link:https://github.com/ElemeFE/element 简介 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源...通过基础的 24 分栏,迅速简便地创建布局。 官网地址:http://element.eleme.io/ 示例 基础布局:使用单一分栏创建基础的栅格布局。 ?...vux-loader 保证了组件按需使用,因此不用担心最终打包了整个 vux 的组件库代码。 vux 并不完全依赖于 WeUI,但是尽量保持整体UI样式接近 WeUI 的设计规范。...Layout 布局 ? Color 色彩 ? Page 分页 ? DatePicker 日期选择器 ? 5....8.vuematerial/vue-material tag:vue-material javascript vue material material-design star:3.9k link:https
在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。...如果你的某个依赖包提供了ng update schematic,那么它在进行重大更改时会自动更新代码!...除了 tree 组件之外,我们还提供了 badge 和 bottom-sheet-components。...Angular还更新了徽章(badge)和底部菜单栏的组件,徽章用于显示小而有用的信息,例如未读信息的数量。...已预配置了一个用于排序和分页的datasource。
Angular 存储库中最受欢迎的问题之一是“建议:作为可观察输入”。几个月前,我们回应说我们希望支持这个用例,作为框架中更大努力的一部分。...Angular 语言服务自动导入 Gif 显示了 VSCode 中 Angular 语言服务的自动导入功能 还有更多!...nonce在 Angular v16 中,我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 的新功能,它允许您为 Angular 内联的组件的样式指定一个属性。...Design 团队密切合作,为 Web 和 Angular Material 提供参考 Material 3 实现。...继续我们的无障碍倡议 遵循 Google 的使命,Angular 可让您为所有人构建 Web 应用程序!这就是为什么我们不断投资以提高Angular CDK 和 Material 组件的可访问性。
2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快。下面就介绍下新版本的一些主要新特性,供大家参考。...如果您的某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码! ng add ng add 也是新增的一个cli命令。...遵循数据表组件的模式,CDK包含核心树指令,而Angular Material则提供与顶层的Material Design样式相同的体验 Material 运行命令,添加Material ng add...@angular/material ?...一旦添加Material之后,你就可以生成三个新的入门组件 Material Sidenav 运行命令: ng generate @angular/material:material-nav --name
领取专属 10元无门槛券
手把手带您无忧上云