Angular Material Sticky Header停止工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Angular 循环内使用 material datepicker

material datepicker 需要用到模板变量，如果需要在循环出来datepicker可以这么干直接把 *ngFor 中的index传给[matDatepicker]，用来引用组件 *ngFor...实例看代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-muldatepicker

2.4K2 0

Angular Material 的设计之美

我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。...接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点，并且简单介绍 Angular Material 的一些使用技巧。...另外，Angular Material 的样式是基于 Sass 编写，而我最喜欢的也是 Sass，所以基于 Angular Material 编写 ng-matero 就是宿命的选择。...以下是 Angular Material 主题定制的方法。...总结文章篇幅有限，以我浅薄的资历还无法将 Angular Material 的设计之美剖析的面面俱到，但是如果大家通过这篇文章能够更好的了解 Angular Material 或者对 Angular

6.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

基于 Angular Material 的 Data Grid 设计实现

Angular Material 对于 table 的封装已经足够灵活，但是模板的定义依然很繁琐，也缺少很多刚需功能。...Extensions Data Grid 几乎整合了 Angular Material 表格的所有功能，同时又增加了很多实用功能。...目前 Extensions Data Grid 已经实现的功能如下： paging（分页，包括前端分页和后端分页） sorting（排序，目前只支持单一排序） sticky columns（列的固定）...模板是 angular 组件极其灵活的一个功能。大部分优秀的第三方组件都具有自定义模板的能力，而在 Data Grid 中，模板更是一个不可或缺的功能。...官网示例：Expandable row 行展开的实现借助了 Angular Material 表格的 multiTemplateDataRows 参数，实现细节很多。

6.3K2 0

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

matero-poster.jpg 前言目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。...很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。...经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet...目录结构先看一下目录结构，这个目录结构遵循了 Angular 的最佳实践，尽量保证结构的规范化与合理性。...和 subtitle 设置标题和副标题，page-header 同样支持颜色系统，可以直接添加颜色类来改变页面标题部分的颜色，如下： header class="bg-purple-500"

3.6K2 0

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 初学者....项目, 使用Implicit Flow进行身份认证, 访问被保护的API 建立Angular 6项目, 配置Angular Material和UI布局, 路由等........访问被保护的API 访问未被保护的API资源跨域访问API的另一种办法 oidc-client.js, 集成Angular客户端到Identity Server 4 其它功能(上) 其它功能(下)

1.3K3 0

AngularDart Material Design 应用布局顶

构建样式由包提供：angular_components/app_layout / layout.scss.css。...要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。...dense-header 使主要使用鼠标和键盘界面的应用栏更加密集。 material-header-row 标题中的一行。...这是一个例子： header class="material-header"> material-header-row"> material-button icon...例： header class="material-header shadow"> material-header-row"> material-button icon

5.2K3 0

Angular实战项目（2）

--spec=false header> header (toggle)="sidenav.toggle()" (toggleDarkTheme...)="switchDarkTheme($event)">header> header> material 中的很多控件使用了 flex 布局 flex: 1 1 auto; } ?...image.png Angular Material ?.../material@2.0.0-beta.7 ?

1.3K1 0

Ng-Matero V10 正式发布！

Angular v10 在六月下旬就悄无声息的发布了，虽然 v9 的发布延期了两个月，但是 v10 并没有受影响，仍然如期而至。...再来说一下 Angular Material， v10 有一个非常大的变化，就是增加了 datepicker 的区间选择功能，不用多说，这是一个极其实用的功能。...其实 v10 版本除了将 Angular 和 Angular Material 升级之外，主要是调整了 schematics ng add 的兼容问题，其它代码和 v9 最新版是一样的。...Material Extensions 扩展组件库的大部分组件都做了主题样式分离，从 9.11.0 之后必须要定义主题样式。熟悉 Material 组件库的朋友应该都不陌生。.../app/theme/header/header-theme'; @import '../app/theme/sidebar/sidebar-theme'; @import '..

1.9K1 0

使用.net core ABP和Angular模板构建博客管理系统（实现编辑页面功能）

{ padding:10px 0; } header .u-title{ width: 65%; } header .u-title input{ background-color...li>material-icons...material-icons...返回列表后也没有自动更新预览处也没实现实时预览自动更新也没有实现发布功能还没有实现界面不够美观返回列表更新这个就要用到angular的父子页面传值。...预览有了，但是没有实时同步要实现实时同步，我们使用angular的FormControl来帮忙 import { FormControl } from '@angular/forms'; import

1.5K3 0

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

ng add @angular/material：安装并设置 Angular Material 和主题，注册新的初始组件到ng generate中。...Angular Material + CDK 组件最值得一提的是用于显示分层数据的树形控件，遵循数据表组件的模式，CDK 包含树的核心指令，而 Angular Material 则提供与顶层的 Material...Angular Material 初始组件一旦运行ng add @angular/material并添加材料到现有的应用程序中，就能够生成 3 个新的初始组件。...例如，运行下面的代码： ng generate @angular/material:material-dashboard Material Data Table Material Data Table...例如： ng generate @angular/material:material-table 想要了解更多的资料：Angular Material Schematics CLI Workspaces

6.4K2 0

Angular 6的新特性介绍

遵循数据表组件的模式，CDK包含核心树指令，而Angular Material则提供与顶层的Material Design样式相同的体验 Material 运行命令，添加Material ng add...@angular/material ?...一旦添加Material之后，你就可以生成三个新的入门组件 Material Sidenav 运行命令： ng generate @angular/material:material-nav --name...Material Dashboard 运行命令： ng generate @angular/material:material-dashboard --name=my-dashboard ?...Material Data Table 运行命令： ng generate @angular/material:material-table --name=my-table ?

3.4K2 1

【技术圈】Chrome 80 稳定版发布| Node.js 安全漏洞修复

速览 Chrome 80 稳定版发布 Node.js 13.6-13.8 发布 Firefox 73 正式发布 TypeScript 3.8 RC 发布 Angular 9.0.0 版本发布 Chrome...这些漏洞包括： CVE-2019-15606: 因没有截断header的空白符导致攻击者绕过安全检测。...CVE-2019-15605: 利用 Transfer-Encoding header 混淆多个请求之间的关系，从而利用一个 http 请求影响后续的 http 请求，从而造成多种攻击。...Angular的9.0.0版本已发布！这是涵盖整个平台的主要版本，包括框架，Angular Material和CLI。...更新内容详见：https://github.com/angular/angular/blob/master/CHANGELOG.md Chrome 81 开始支持 Text fragments 功能该功能允许用户使用

1.7K1 0

Ng-Matero V9 正式发布！

借此项目也认识了很多对 Angular 和 Material 感兴趣的朋友，如今对项目的维护已经不单单是兴趣，更多的是一种责任。...extensions 再谈 Angular Material 我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美，然而事实是 Angular Material 在设计及实现方面确实非常优秀...但是在 Angular Material 中就不能如此自由随意，比如在 Angular Material 的表单中使用 ng-select。...我个人强烈建议将 Angular Material 作为基础库使用，样式方面可以根据喜好定制，实在无法接受 Material 的表单交互的话，也可以搭配 Bootstrap 亲自实现一个表单组件，或者直接引用其它组件库...扩展组件库实话说 Angular Material 确实缺少一些比较常用的交互组件，在开发 Ng-Matero 的过程中，顺便开发了一套 Material Extensions 的组件库。

1.7K2 0

React组件总结——难道还没有你喜欢的组件吗？

菜单 react-burger-menu react-sidebar react-motion-menu react-offcanvas react-tree-menu react-metismenu Sticky...(粘性布局) react-sticky react-headroom react-listview-sticky-header react-sticky-state react-stickynode Tabs...react-file-reader-input react-pagespeed-score react-autolink react-svg-buttons react-avatar react-joyride material-color-hash

2K3 0

Ng-Matero v15 正式发布

具体效果如下图所示：在线体验地址焦点管理属于 a11y 的范畴，使用 Angular Material 可以很轻松的完成 a11y 的需求，同时 Angular CDK 中也有 A11yModule...另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明： Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件我觉得 v15 最大的变化不是 Angular，而是 Angular Material。...详情参考官方文档迁移到基于 MDC 的 Angular Material Components，里面详细介绍了组件的变化内容以及升级时的注意事项。...说一下自己的感受：在第一次得知 Angular 官方将在 v15 全面迁移 MDC 时，内心还是很抵触的，主要是觉得 MDC 的很多效果做的不如 Angular Material 细腻（比如 form-field

6.9K4 0

ROS编程（ETH）2018更新版习题说明（三）

2 material... material> 0</self_collide...x_pillar <= 0.4 ) { vel_msg_.linear.x = 0; vel_msg_.angular.z...参考：http://wiki.ros.org/rviz/DisplayTypes/Marker A: cpp //RViz Marker marker.header.frame_id...= "base_laser"; //base no marker.header.stamp = ros::Time(); marker.ns = "pillar";

9441 0

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

Material Design for Angular [Material.png] 首先要推荐的，当然是 Angular 官方的 Material 组件库，Material Design 是 Google...其中 Angular 版本的 Material 组件库，现在已经是Angular官方指定的组件库，所以受众特别多，不管是在Github的Star/Fork数，还是在NPM的周下载量都是TOP 1的。...以下是2021年4月19日的数据：指标数值 Star 21.4k Fork 5.7k NPM周下载 891,480 Material Design for Angular早在2016年3月份就发布了第一个基于...不过 Material Design for Angular 却不是最早的 Angular 组件库，后面我们将要介绍的 PrimeNG 比它更早诞生，但 Material 毫无疑问是最流行和最受欢迎的。...Material 还早一些。

2.5K3 0

Angular 结合 NG-ZORRO 快速开发

结合 ng-zorro angular 比较流行的 ui 框架有： Angular Material 官方指定 UI 框架 NG-ZORRO，又名 Ant Design of Angular 国内比较流行的...如果你还不了解相关的 angular 主要内容，请先前往文章了解 Angular 开发的内容。...user">用户列表 header...> header"> header-trigger" (click)="isCollapsed = !...'menu-unfold' : 'menu-fold'" > header> <nz-content

2.5K1 0

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

与 Angular Material 的集成在实际项目中，Angular 常常与 Angular Material 框架结合使用。...Angular Material 提供了一些内置的图标组件，例如 MatIconModule，它能够轻松地集成图标库，如 Google Material Icons。...Angular Material 提供了一种方式，将自定义的 SVG 图标集成到 MatIcon 组件中。...;import { MatIconRegistry } from '@angular/material/icon';@Component({ selector: 'app-root', templateUrl...图标可以通过多种方式进行引用，例如直接在模板中使用路径引用、通过封装组件进行模块化管理、或者结合 Angular Material 进行图标注册。这些方式都有助于提高代码的复用性和可维护性。

6111 0

polymer组件化与vm特性

/components/core-header-panel/core-header-panel.html"> Material design风格的标签,具有很炫酷的效果 --> header-panel> header-panel> 元素是一个简单的容器,例如包含一个header...Rafael'; } }); 这里owner属性里的name-tag就相当于mvvm中vuejs的derectives，angular...3. angular 2.0 和 EmberJS等现有成熟方案的改进 angular2.0已明确提出将支持Node绑定、模板集成、元素自定义和支持网络组件的无缝集成；ember的发展情况依然，今后也不排除

2.5K1 0

点击加载更多

Angular 循环内使用 material datepicker

Angular Material 的设计之美

基于 Angular Material 的 Data Grid 设计实现

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

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

AngularDart Material Design 应用布局顶

Angular实战项目（2）

Ng-Matero V10 正式发布！

使用.net core ABP和Angular模板构建博客管理系统（实现编辑页面功能）

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

Angular 6的新特性介绍

【技术圈】Chrome 80 稳定版发布| Node.js 安全漏洞修复

Ng-Matero V9 正式发布！

React组件总结——难道还没有你喜欢的组件吗？

Ng-Matero v15 正式发布

ROS编程（ETH）2018更新版习题说明（三）

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

Angular 结合 NG-ZORRO 快速开发

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

polymer组件化与vm特性

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐