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

Angular Material 的设计之美

我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。...除了常用组件之外，Angular Material 还有一个组件开发包 CDK。在设计界有一句名言“少即是多”，苹果的产品就是最好的证明。...把这句名言用在 Angular Material 上丝毫不为过，其实除了我们看到的组件之外，Material 还有一些隐藏组件，比如可以用 menu 组件构造 popover，我会在下文中介绍。...所以必须使用 mixin 编写某些样式，这样的话就可以有局部变量环境。...但是耐心看一下，就会发现其简洁之道，Angular Material 的 API 也是“少即是多”的一种表现。以表单组件为例，以下是一个滑块组件。

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

    Ng-Matero：基于 Angular Material 搭建的中后台管理框架

    matero-poster.jpg 前言 目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。...很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。...另外，Material 的确是一个高质量的组件库，不管是设计思路还是使用方式，都近乎完美。...经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet...同时，为了弥补 Material 的不足以及更好的发挥框架的优势，我创建了另外一个项目以扩展 Material 的组件库。 因为目前还没有完善的文档，所以本篇文章会简单介绍一下框架的使用。

    3.6K20

    ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!!...这是一个小项目的实战视频, 该项目采用了: ASP.NET Core 2.1 做API Identity Server 4 Angular 6 Angular Material...这个项目比较简单, 适合ASP.NET Core Web API 和 Angular 初学者....第三部分, 建立Angular项目, 使用Implicit Flow进行身份认证, 访问被保护的API 建立Angular 6项目, 配置Angular Material和UI布局, 路由等........访问被保护的API 访问未被保护的API资源 跨域访问API的另一种办法 oidc-client.js, 集成Angular客户端到Identity Server 4 其它功能(上) 其它功能(下)

    1.3K30

    material Tree组件的前端模糊搜索

    首先说下我们的需求： 根据materialUI组件的treeView 来进行前端的模糊搜索 展开所选节点所在的父节点， 同时所匹配到的节点高亮显示 思路：需要先把全部的树节点平铺到一层， 然后根据所选择的子节点...则添加到父节点的数组中， 然后再传递 已经匹配上的 全部节点中的 那一个节点 （因为父节点还可能拥有父节点），进行递归。...具体的代码： import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TreeView... from '@material-ui/lab/TreeView'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import... ChevronRightIcon from '@material-ui/icons/ChevronRight'; import TreeItem from '@material-ui/lab/TreeItem

    1.4K20

    angular组件的基本使用

    angular组件的基本使用 组件 组件模板 ng generate component xxx 新建组件(大驼峰命名) 属性绑定 public...通讯方案 直接的父子关系，父组件直接访问子组件的 public 属性和方法 直接的父子关系，借助于 @Input 和 @Output 进行通讯 没有直接关系，借助于 Service 单例进行通讯 利用...cookie 和 localstorage 进行通讯 利用 Session 进行通讯 直接调用 父组件访问子组件方法 //子组件定义一个public的方法,父组件直接调用 //子组件 public...) private childComponent: ChildComponent; @Input 和 @Output @Input ,在父组件设置子组件的属性 //子组件 @Input() public...panelTitle:string; //父组件上可以这样设置 panelTitle 这个参数 的标题"> @Output 子组件调用父组件的事件

    2.5K30

    Angular Elements 组件在非angular 页面中使用的DEMO

    它借助Chrome浏览器的ShadowDom  API，实现一种自定义组件。 这种组件可以用Angular普通组件的开发技术进行编写，学习成本低，当它构建好后生成一个打包的js文件。...如果用chrome53以后的浏览器的话，可以不引入它。如果是其它浏览器，它是必须的。...native-shim.js 如果angular elements项目打包时，tsconfig.json中， 编译参数 target: "es5"时，  所有的class都被编译为function,此时就必须引入该文件...Angular Elements的开发技术和Angular普通组件是一致的，像Input属性，Output事件，  依赖注入的支持， 内容投影的支持（这个好像要用 来做)  ,总之并没有因为...据说伴随angular 7推出的ivy 渲染引擎能大大减小组件的构建体积，忘在哪个视频中看到说打包后可到10kb的量级，但现在找不到该说法的来源。

    4.1K20

    Ng-Matero V9 正式发布！

    extensions 再谈 Angular Material 我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美，然而事实是 Angular Material 在设计及实现方面确实非常优秀...虽然 ng-select 有 Material 的主题，但是直接使用的话，你会发现没办法展示错误信息。所有第三方表单组件都必须继承 form-field 类才能获得最佳交互体验。...我个人强烈建议将 Angular Material 作为基础库使用，样式方面可以根据喜好定制，实在无法接受 Material 的表单交互的话，也可以搭配 Bootstrap 亲自实现一个表单组件，或者直接引用其它组件库...扩展组件库 实话说 Angular Material 确实缺少一些比较常用的交互组件，在开发 Ng-Matero 的过程中，顺便开发了一套 Material Extensions 的组件库。...这套组件库的组件大致有以下三类： 完全独立开发的组件（e.g. alert） Angular Material 组件的二次封装（e.g. data-grid） 第三方组件的优化及包装（e.g. color-picker

    1.6K20

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

    ng add @angular/material：安装并设置 Angular Material 和主题，注册新的初始组件 到ng generate中。...Angular Material + CDK 组件 最值得一提的是用于显示分层数据的树形控件，遵循数据表组件的模式，CDK 包含树的核心指令，而 Angular Material 则提供与顶层的 Material...Angular Material 初始组件 一旦运行ng add @angular/material并添加材料到现有的应用程序中，就能够生成 3 个新的初始组件。...Material Sidenav Material Sidenav 是带有应用程序名称和侧面导航的工具栏的初始组件，它基于断点窗口（breakpoints）进行响应。...例如，运行如下代码： ng generate @angular/material:material-nav Material Dashboard Material Dashboard 是包含动态网格列表的启动组件

    6.3K20

    【玩转腾讯云】2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI

    2021年如果你想尝试 Angular 框架，以下 Angular 组件库或许是不错的选择！ 1....Material Design for Angular [Material.png] 首先要推荐的，当然是 Angular 官方的 Material 组件库，Material Design 是 Google...其中 Angular 版本的 Material 组件库，现在已经是Angular官方指定的组件库，所以受众特别多，不管是在Github的Star/Fork数，还是在NPM的周下载量都是TOP 1的。...不过 Material Design for Angular 却不是最早的 Angular 组件库，后面我们将要介绍的 PrimeNG 比它更早诞生，但 Material 毫无疑问是最流行和最受欢迎的。...PrimeNG 的组件非常丰富，一共有90+个组件，可能是目前市面上最全的Angular组件库了。

    2.5K30

    Ng-Matero V10 正式发布！

    再来说一下 Angular Material， v10 有一个非常大的变化，就是增加了 datepicker 的区间选择功能，不用多说，这是一个极其实用的功能。...在 Angular v10 发布不久，立即就有人提 issue 要求 Ng-Matero 也升级到 v10，由于受限于第三方组件库及其它细节考虑，迟迟没有更新。...其实 v10 版本除了将 Angular 和 Angular Material 升级之外，主要是调整了 schematics ng add 的兼容问题，其它代码和 v9 最新版是一样的。...Material Extensions 扩展组件库的大部分组件都做了主题样式分离，从 9.11.0 之后必须要定义主题样式。熟悉 Material 组件库的朋友应该都不陌生。...@import '~@ng-matero/extensions/theming'; @include material-extensions-theme($theme); 主题化改动最大的组件是 mtx-select

    1.9K10

    flutter系列之:Material中的3D组件Card

    简介 除了通用的组件之外，flutter还提供了两种风格的特殊组件，其中在Material风格中，有一个Card组件，可以很方便的绘制出卡片风格的界面，并且还带有圆角和阴影，非常的好用，我们一起来看看吧...一提到Card大家第一印象就是名片，在名片中描述了一个人的相关信息，比如姓名，电话和邮箱等。而Card就是将一组相关的信息放在一起呈现的组件。...Card的使用 通过上面的讲解，我们对Card的使用也有了基本的了解，接下来我们可以通过一个具体的例子，来看看Card具体是如何使用的。...但是对于类似名片这种常见的应用，flutter早就为我们想好了，所以他提供了一个叫做ListTile的组件。...不同的ListTile组件，可以用Divider来进行分割，让界面更加美观。

    86510

    Angular 项目中 assetsicons 文件夹的作用详解

    图标组件的封装与复用为了在项目中更高效地使用图标，尤其是 SVG 图标，Angular 中经常会封装一个 IconComponent 组件，该组件会从 /assets/icons 文件夹中加载相应的图标...与 Angular Material 的集成在实际项目中，Angular 常常与 Angular Material 框架结合使用。...Angular Material 提供了一些内置的图标组件，例如 MatIconModule，它能够轻松地集成图标库，如 Google Material Icons。...Angular Material 提供了一种方式，将自定义的 SVG 图标集成到 MatIcon 组件中。...图标可以通过多种方式进行引用，例如直接在模板中使用路径引用、通过封装组件进行模块化管理、或者结合 Angular Material 进行图标注册。这些方式都有助于提高代码的复用性和可维护性。

    47110

    AngularDart Material Design 应用布局 顶

    自述 应用布局 应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏，抽屉和导航样式。...要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。...这是使用标准material-list组件和一些特殊的CSS类来完成的。 顶级抽屉内容应该是具有可选组元素的MaterialListComponent，这些元素由元素上的group属性指定。...material-list> material-drawer> 由于样式封装，如果列表内容不是直接在抽屉中（也就是说，它包含在另一个组件中），则必须使用mixin提供上面的样式。...需要在包含组件的styleUrls列表中包含packages：angular_components/app_layout / layout.scss.css。 适用于延期内容。

    5.1K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券