浮动的动作按钮(Floatng Action Button):Floating Action Button是Material Design中非常重要且独特的一种设计方式,重要到在官方的设计指南中有独立的一个完整篇章在介绍它,它通常会固定在整个萤幕或是某个功能区快的固定位置,用来提醒使用者这个按钮具有(或包含)画面上最常使用到的功能,也可以想像成是一种捷径的
因为 Angular Material 的各个组件 (比如 mat-button) 都已经自带 Ripple 了。 我是遇到一个比较特殊的需求才用上 Ripple 的。 需求是这样的: 有一个 Sidebar,Sidebar 里有一个 Extended Fab Button,这个 Sidebar 可以 collapse,当 collapsed 后 Extended Fab Button 会变小。 假如我们直接给 Extended Fab Button...
由于按钮在网页上的存在极具意义,Angular Material在设计上并未把按钮封装成component,而是以directive的方式附著在 <button> 或 <a> 标签上,并透过样式的变化让原来的 <button> 或 <a> 标签具有Material Design的风格。 扁平化按钮是最基本的按钮样式,使用上非常简单,在原来的button或a标签上加上 mat-button 即...
material-navigation 导航元素将显示在头部的左侧。 仅使用锚标签,material-button内置自己的样式。 这是一个例子: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <header class="material-header"> <div class="material-header-row"> <material-button icon class="material-drawer-button" (trigger)="drawe...
下图是不同主题下的 Button 组件 不同的主题定义了不同的主色 (primary color) 和强调色 (accent color)。 这些Prebuilt Themes 是通过 angular.json 设置的 Custom Theme Get Started 在添加 Angular Material 时选择 Custom Theme 选择Custom Theme 后,angular.json 就没用 Prebuilt Themes 了。
Angular Material 的表单组件更像是对原生 html 元素的复写。在熟悉了一种组件之后,几乎不需要额外的记忆成本,就可以很容易的猜到某些 API,简单易懂,使用很方便。不过时常翻文档还是很有必要的。 再看一下菜单组件,使用方式同样非常简单。 <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-...
在上一篇文章中,我详细介绍了如何通过 Material Design 实现一个简易版响应式的mat-table。这篇文章中将在此基础之上进一步介绍些 mat-table 自带的图表的高级功能。 1 Material Loading Indicator 由于整个后台获取数据的过程是异步的,也就是说我们在触发图表的事件时会有一部分等待(并不是同步的等待)时间,为了让用...
我想创建一个 mat-dialog 具有默认样式 mat-button 用于关闭对话框。一切正常,除了按钮缺少 Angular Material 应用的 Material Design 风格。 我如何获得显示的样式? AFAIK 我已经根据需要导入了所有模块,并 正确设置了 Angular Material 的每个部分,包括 themes。 my-dialog.component.ts : import { Component, OnIni...
昨天我们把整个后台系统的架构基本上完成了,今天我们要来学习使用Angular Material的List元件,来填满SideNav。List元件功能非常强大,而且也是个在任何地方都很有可能会用到的功能,善用List可以产生各种不同的变化来满足各种需求,Let's GO! 关于Material Design中的List ...
goldens fix(material/button): update button golden (#31346) Jun 13, 2025 guides docs: rename material.angular.io to material.angular.dev (#30993) May 2, 2025 integration build: update to Angular v20 final (#31241) May 28, 2025 scripts build: remove slack notification config (#31228) ...