文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Angular Material 的设计之美

正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化和可访问性，以便所有用户都可以使用。...不会让开发人员感到困惑的简单 API。 在各种各样没有 bug 的用例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围内进行定制。...基于这套工具集，我们可以很容易的搭建和 MD 风格相统一的界面。 极简的 API Angular Material 的官方文档可能稍微不太友好，总感觉内容很多，看不进去。...在熟悉了一种组件之后，几乎不需要额外的记忆成本，就可以很容易的猜到某些 API，简单易懂，使用很方便。不过时常翻文档还是很有必要的。 再看一下菜单组件，使用方式同样非常简单。...菜单 Angular Material 的菜单组件可以说非常强大，除了官网提到的功能之外，我们还可以用以下方式实现动态数据加载的多级菜单，比如 ng-matero 的 Top Menu 布局。

6.2K30

Ng-Matero v15 正式发布

侧边栏导航的焦点管理 侧边栏导航的聚焦功能是在 14.3.0 中添加的，可能很多人没有注意到这个不显眼的功能（使用 TAB 键即可快速的切换焦点，按 space 或者 enter 键可以展开收起二级菜单...另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明： Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件 我觉得 v15 最大的变化不是 Angular，而是 Angular Material。...详情参考官方文档 迁移到基于 MDC 的 Angular Material Components，里面详细介绍了组件的变化内容以及升级时的注意事项。...而且想要实现一套基于 CSS 的响应式系统，编译出来的代码非常庞大，划分的列数越细，编译出来的体积就越大。而基于 JS 动态生成的响应式系统就不会有这种烦恼。

6.9K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Angular 6正式版发布，都有哪些新功能

    ng add @angular/material：安装并设置 Angular Material 和主题，注册新的初始组件 到ng generate中。...应用程序中启动 Angular 组件，方法是将它们注册为 Custom Elements，目前已被广泛用于 angular.io 内容管理系统中，它嵌入 HTML，可动态启动系统功能。...Angular还更新了徽章（badge）和底部菜单栏的组件，徽章用于显示小而有用的信息，例如未读信息的数量。...Angular Material 初始组件 一旦运行ng add @angular/material并添加材料到现有的应用程序中，就能够生成 3 个新的初始组件。...Material Sidenav Material Sidenav 是带有应用程序名称和侧面导航的工具栏的初始组件，它基于断点窗口（breakpoints）进行响应。

    6.4K20

    用于H5的移动开发框架

    它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。...AngularJS 　　Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。 　　...开发者可用此软件开发基于HTML5的应用，并 用于移动设备中。...美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。...滑动触发操作菜单 　　在手机应用中(特别是iOS平台)，很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话;邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读

    7.2K10

    用于H5的移动开发框架

    它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。...AngularJS 　　Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。 　　...开发者可用此软件开发基于HTML5的应用，并 用于移动设备中。...美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。...滑动触发操作菜单 　　在手机应用中(特别是iOS平台)，很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话;邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读

    7.5K40

    HTML5移动开发的10大移动APP开发框架

    它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。...AngularJS 　　Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。 　　...开发者可用此软件开发基于HTML5的应用，并 用于移动设备中。 　　...美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。...滑动触发操作菜单 　　在手机应用中(特别是iOS平台)，很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话;邮件列表界面，左滑可以删除，右滑可以标注为”已读/未读

    9.4K10

    Angular Elements 及其工作原理

    Framework 这个庞大的体系中收益 @angular/elements这个包提供可将 Angular 组件转化为原生 Web Components 的功能，它基于浏览器的 Custom Elements...Angular Elements 提供一种更简洁、对开发者更友善、更快乐地开发动态组件的方式 —— 在幕后它基于同样的机制（指创建动态组件），但隐藏了许多样板代码。...这也是我们开始研究 Angular Elements 的一系列文章的原因，我们将在其中详细解释 Angular 如何在 Angular Elements 的帮助下实现 Custom Elements API...可以通过 Custom Elements API 来完成这件事。在文章的后续章节，我们将演示如何使用 Angular 组件的 @Input 装饰器与 这个 name 属性保持同步。...顺便，关于如何动态构造 Angular 组件可以通过阅读Dynamic Components in Angular这篇文章进行了解。它其中阐述的运作机制和我们这里使用的一模一样。

    3K20

    Angular 5 快速入门与提高

    为了避免这个繁琐的过程影响对Angular框架本质的思考，我们将这些 必需品进行了必要的配置和打包，以便适应在线编写和实验。现在只需要引入 一个库a5-loader就可以了。...五、启动Angular应用 前面课程中，我们已经创建了一个组件和一个NG模块，不过似乎只是定义了一堆的元数据， 几乎没有写太多有价值的代码。 但这就是Angular框架的一个特点：声明式开发。...这些元数据是用来向框架声明 如何引导启动应用程序的重要信息。...对平台的抽象）， 这个函数最重要的作用，在于其内部创建了一个即时（__J__ust __I__n __T__ime）编译器， 可以在线实时编译NG模块和组件，这也是它被称为动态（Dynamic）的原因：...而对于AOT而言，生成模块 工厂就结束了，应用启动时使用bootstrapModuleFactory()调用生成的模块工厂即可。

    2.5K20

    基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

    引言 大家好~ 本文是基于 qiankun 的微前端最佳实践系列文章之 从 0 到 1 篇，本文将分享如何使用 qiankun 如何搭建主应用基座，然后接入不同技术栈的微应用，完成微前端架构的从 0...中如何接入不同技术栈的微应用。...micro-app 从上图可以看出，我们主应用的组件和微应用是显示在同一片内容区域，根据路由规则决定渲染规则。...首先，我们使用 single-spa-angular 生成一套配置，在命令行运行以下命令： # 安装 single-spa yarn add single-spa -S # 添加 single-spa-angular...小结 最后，我们所有微应用都注册在主应用和主应用的菜单中，效果图如下： ? micro-app 从上图可以看出，我们把不同技术栈 Vue、React、Angular、Jquery...

    8.8K41

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

    前言： 　　上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加...在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 在 Angular 销毁指令/组件之前调用。...2、配置首页组件路由（多模块路由完美解决）： 首先，我们的博客项目存在博客管理和用户管理两个核心模块，我们创建了两个模块，那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块的路由...自定义页面Layout布局（动态菜单栏配置）： 一般情况下我们的页面动态菜单都是从后台读取，然后遍历绑定在【app.component.html】页面中的，我们这里没有展示没有涉及到后台就是用固定式的路由

    6.3K20

    2025最新在线生成器推荐，自动美化+实时预览，效率翻倍

    ，多端适配语义化标签，利于SEO学习辅助生成代码可供学习参考降低入门门槛实践与学习相结合二、2025年主流HTML生成工具评测基于大量用户实际使用反馈，李响团队对当前市面上的HTML在线生成工具进行了深入分析...HTML代码支持Sketch、Figma等设计工具智能识别布局和组件工作流程上传设计文件或提供设计稿链接系统自动分析布局结构和样式生成语义化的HTML和CSS代码提供编辑器和预览界面适用场景设计团队向开发团队交付个人创作者快速实现设计想法产品迭代过程中的快速原型...4.ElementBuilder组件库核心特点专注于UI组件生成支持多种前端框架代码干净、可维护性强组件分类导航类组件（菜单、面包屑等）数据展示类（表格、卡片等）表单类（输入框、选择器等）反馈类（弹窗、...：考虑LynxAI等具备后端能力的平台按团队规模选择个人使用：注重易用性和学习成本团队协作：考虑代码规范性和可维护性企业级应用：关注安全性和稳定性四、使用技巧与最佳实践基于用户成功经验，李响团队整理出以下实用技巧...，HTML生成工具的发展将呈现以下趋势：智能化程度提升AI辅助代码生成更加精准自然语言理解能力增强自适应设计能力提升集成化发展与开发流程工具深度整合支持更多框架和技术栈云端协作功能完善用户体验优化界面更加直观易用学习成本进一步降低个性化定制能力增强本文由李响团队基于大量

    22010

    前端插件以及部分细分网址梳理

    展示页类似的效果，适用于单页应用，兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好 ScrollMagic: 神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果...实现的各种动态效果，看真相 Fluidbox: 页面上内嵌图片的放大缩小效果，类似于 Medium 中的效果 jquery-validation: jQuery 的一个插件，用于校验 Form 表单...HTML5 mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架 interact.js: 一个适用于现代浏览器的，用于处理 手势、拖放、缩放等的库...JSON 生成响应的 Form 表单 restangular: Angular 中用来处理 RESTful API 的插件，可替代 $resource ng-cordova: Cordova 常用组件的...grunt-react: React 的 Grunt 组件, 用于将 JSX 编译成 JS touchstonejs: 基于 React 的手机应用前端框架 essential-react: 基于 React

    6.8K90

    使用YAKINDU STATECHART TOOLS的TypeScript代码生成

    所生成的代码很容易集成到现代web开发框架，例如Angular或Ionic。 ? 单页web应用 TypeScript是一门免费和开源的编程语言，由Microsoft开发和维护。...Angular 2+或Ionic 2+等web框架都是基于TypeScript。这些框架利用了TypeScript的优势来建造可扩展的单页web应用。...在这个例子中，有一个简单的HMI（人机界面），共两个屏幕： • 欢迎屏幕: 显示欢迎动画 • 主屏幕: 包含若干组件(时速表、灯组件、信息娱乐…)....信息娱乐组件是一个容器，里面有进一步的组件，例如infotainment menu, weather, music player和phone。 在图片的右侧，可以看到三个菜单项。...集成所生成的菜单服务状态机到Angular 在Angular上下文中，所生成的MenuService状态机被创建为一个Angular服务。

    2.8K10

    Vuejs和其他前端框架的对比

    风格的方法去输出动态的内容。...另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...但即使如此，一个包含了 Vuex + Vue Router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多...测试Angular2一开始就设计好了如何对组件进行测试，而Vue组件虽然也很好写测试，但是没有官方推荐的唯一标准（当然，对视图是否需要测试还有待探讨）。...Riot Riot 2.0 提供了一个类似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。

    5.3K110

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    一、Overview Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。...四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中，框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...对于参数对象中的属性（key）对应的属性值（value），我们可以绑定一个组件中的属性进行动态的赋值，也可以通过添加单引号将参数值作为一个固定的数值，例如在下面代码中的两个查询参数就是固定的值 Angular 中，需要在组件类中依赖注入 ActivatedRoute 来获取传递的参数信息 这里的 queryParamMap 是一个 Observable 对象，所以这里需要使用 subscribe...4.2.2、动态路由传递 与使用查询参数不同，使用动态路由进行参数传值时，需要我们在定义路由时就提供参数的占位符信息，例如在下面定义路由的代码里，对于组件所需的参数 newsId，我们需要在定义路由时就指明

    5.8K50

    Angular v20 版本发布

    从那时起，我们引入了资源流并创建了一个名为 httpResource 的新 API，允许您使用基于 Signal 的反应式 API 进行 HTTP 请求。...框架新增和改进 要动态创建一个 Angular 组件，您可以使用 createComponent 函数。...在 v20 版本中，我们引入了新的功能，允许您为动态创建的组件应用指令和指定绑定： import {createComponent, signal, inputBinding, outputBinding...我们还使文件名和类名后缀变为可选，以鼓励更有意向的抽象命名，从而减少样板代码。 从 Angular v20 开始，默认情况下，Angular CLI 将不会为您的组件、指令、服务和管道生成后缀。...我们进行了多次直播 ，展示了如何在 Angular 应用程序中利用 Genkit 和 Vertex AI。

    1.5K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券