首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

@angular/material没有导出成员'OverlayContainer‘

@angular/material是一个开源的Angular UI组件库,提供了丰富的可重用UI组件和样式,帮助开发者快速构建现代化的Web应用程序。

在@angular/material中,'OverlayContainer'是一个重要的导出成员,它是用于管理覆盖层的容器。覆盖层是指在应用程序中创建的浮动面板,例如对话框、菜单、弹出框等。'OverlayContainer'负责将这些浮动面板插入到DOM中,并提供了一些方法和属性来管理它们的位置、大小和样式。

具体来说,'OverlayContainer'提供了以下功能和特点:

  • 管理覆盖层的插入和移除:通过调用attach方法可以将覆盖层插入到DOM中,调用detach方法可以将其移除。
  • 控制覆盖层的位置和大小:可以使用positionStrategy属性来设置覆盖层的位置策略,例如相对于某个元素或固定的坐标。还可以使用widthheight属性来设置覆盖层的大小。
  • 支持多个覆盖层的叠加:可以同时管理多个覆盖层,确保它们按照正确的顺序叠加在一起。
  • 提供样式和主题支持:可以通过addPanelClass方法为覆盖层添加自定义的CSS类,实现样式定制。同时,覆盖层会自动继承应用程序的主题样式。

应用场景:

  • 对话框和弹出框:可以使用'OverlayContainer'来管理对话框和弹出框的显示和隐藏。
  • 菜单和下拉框:可以使用'OverlayContainer'来管理菜单和下拉框的弹出和收起。
  • 提示框和通知栏:可以使用'OverlayContainer'来管理提示框和通知栏的显示和隐藏。

推荐的腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ionic3使用带图标带事件的toast

ionic3自带的ToastController创建的toast比较简单,不支持图标,且点击toast时是没有事件回调的…… 这个时候,如果想扩展这些功能,一是修改源码,二是自己实现,然而这两种方法都比较麻烦.../animations,动画的导入早期也是import * from ‘@angular/animations‘,只是后期把animations抽离后就变成了import * from '@angular...配置: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core...ToastContainerDirective; constructor(private toastrService: ToastrService) {} ngOnInit() { this.toastrService.overlayContainer...无论想不想用bootstrap,在调用toastr-bs4-alert.scss前,先类似导入如下两个模块,它说导入完编译后就会没有了,见截图说明(我不明白为啥导入后反而没有,黑人问号脸): @import

3K20

18 个漂亮的 Bootstrap 模板

确切地说,这些框架和库是 React、Vue、Angular。如果你不熟悉它们,也可以只浏览纯 JavaScript 构建的最佳模板,或阅读有关 Angular 和 React 的文章。...更多信息:https://themeforest.net/item/gene-angular-2-material-design-admin-template/19877169 Demo:https:/...没有 jQuery 依赖性。 两个仪表板:分析和电子商务。 带有商店、愿望清单、结帐的“电子商务”部分。 快速搜索。 数百个页面、组件和卡片。 最近更新:大约两周前。...有用的程序,例如发票导出到 pdf、邮件、聊天、联系人、待办事项列表。 带有模板的免费设计文件。 250 多个 UI 元素、小部件、页面。 最近更新:大约两周前。...或者你需要在一个月内启动该应用程序,而且没有时间自定义模板)。 仔细阅读使用所需技术构建的模板的演示,同时牢记从第 2 点中学到的内容。 选择模板。

14.5K11
  • Angular 工具篇之文档管理

    Angular 工具篇系列教程目录: Angular 工具篇之规范化Git版本管理 Angular 工具篇之VSCode调试 Angular 工具篇之Storybook Angular 工具篇之国际化处理...Angular 工具篇之npx及angular-cli-ghpages Angular 工具篇之分析包的大小 本文我们将介绍 Compodoc 这款工具,它用于为 Angular 应用程序生成静态文档...Compodoc 能够帮助 Angular开发人员为他们的应用程序生成清晰且有用的文档,这使得参与应用程序开发的其它成员也可以轻松了解当前应用程序或库的特性。...支持多种主题风格,比如 laravel, original, material, postmark 等。 支持快速检索,基于强大的 lunr.js 搜索引擎。...port] —— 指定本地文档服务器的端口 -w, –watch —— 启动监听模式,文件发生异动时自动编译 –theme [theme] —— 设置主题风格,支持 laravel, original, material

    1.6K10

    Angular Material 的设计之美

    在各种各样没有 bug 的用例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围内进行定制。 将性能开销降至最低。...我可以说一下自己的感受,Angular Material 的交互更加流畅,细节做的更好。 Angular Material 组件库虽然很优秀,但是却被戴上了只适合做 C 端界面的帽子。...接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。...响应式布局 Angular Material没有布局组件。但是不用担心,官方出品了一款基于指令布局的神器 flex-layout,它是专门为 Angular 设计的。...总结 文章篇幅有限,以我浅薄的资历还无法将 Angular Material 的设计之美剖析的面面俱到,但是如果大家通过这篇文章能够更好的了解 Angular Material 或者对 Angular

    5K30

    AngularDart Material Design 应用布局 顶

    构建 样式由包提供:angular_components/app_layout / layout.scss.css。...要在Angular组件中使用这些样式,只需将其添加为Component注解中的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式,以便您可以根据需要轻松覆盖样式值。...selector: 'my-component', templateUrl: 'my_component.html', styleUrls: const [ 'package:angular_components...持久抽屉指令将其自身导出为抽屉,这允许其它操作可以轻松使用它。toggle()可用于打开/关闭抽屉。抽屉支持deferredConent指令,允许开发人员在抽屉不可见(关闭)时从页面添加/删除内容。...需要在包含组件的styleUrls列表中包含packages:angular_components/app_layout / layout.scss.css。 适用于延期内容。

    4K30

    Ng-Matero V9 正式发布!

    借此项目也认识了很多对 AngularMaterial 感兴趣的朋友,如今对项目的维护已经不单单是兴趣,更多的是一种责任。...extensions 再谈 Angular Material 我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美,然而事实是 Angular Material 在设计及实现方面确实非常优秀...但是在 Angular Material 中就不能如此自由随意,比如在 Angular Material 的表单中使用 ng-select。...扩展组件库 实话说 Angular Material 确实缺少一些比较常用的交互组件,在开发 Ng-Matero 的过程中,顺便开发了一套 Material Extensions 的组件库。...Material 官网并没有关于 color-picker 的介绍,所以具体用什么形式的交互实现完全由自己探索,最终设计成现在的样子。

    1.3K20

    Ng-Matero v15 正式发布

    我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本,竟然已经是两年前的事情了。在这两年的开源生涯中,主要精力都在 Material 的扩展组件库上面。...但是 datetimepicker 的时间选择模块并没有完全遵循 Material 规范(缺少时间输入模式),这也影响了很多需求的实现。...具体效果如下图所示: 在线体验地址 焦点管理属于 a11y 的范畴,使用 Angular Material 可以很轻松的完成 a11y 的需求,同时 Angular CDK 中也有 A11yModule...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明: Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件 我觉得 v15 最大的变化不是 Angular,而是 Angular Material

    5.5K40

    【前端技术丨主题周】Angular 核心概念与框架演进

    方便读者对Angular有个直观的全局认识。 本文选自《揭秘Angular 》 核心概念 Angular 框架有七大核心概念,它们是Angular 的重要组成部分。 ?...在新的语言标准ES 6 中,提供了import 来导入在其他文件中定义的模块,且用export 将诸如jQuery 或moment 这样的依赖导出到业务代码模块中。 2 ....在此之上,还有不少其他的外部工具库,类似于: Angular Material,Google 官方的Material 设计风格的UI 组件库。...平台亮点 以上内容先后介绍了Angular 核心概念和Angular 平台提供的各种各样的功能,那么Angular 相对于其他前端技术有什么特点呢?...除了上面提到的Material Design UI、Mobile Toolkit,还包括: Kendo UI、Onsen UI 2 等UI 库,提供了多样化的界面方案选择。

    9.1K10

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

    Material Design for Angular [Material.png] 首先要推荐的,当然是 Angular 官方的 Material 组件库,Material Design 是 Google...其中 Angular 版本的 Material 组件库,现在已经是Angular官方指定的组件库,所以受众特别多,不管是在Github的Star/Fork数,还是在NPM的周下载量都是TOP 1的。...Angular 2的Alpha版本:2.0.0-alpha.0,中间演进了一年多,迟迟没有发布2.0的正式版本,直到第二年12月才发布基于Angular 5的5.0.0正式版本。...不过 Material Design for Angular 却不是最早的 Angular 组件库,后面我们将要介绍的 PrimeNG 比它更早诞生,但 Material 毫无疑问是最流行和最受欢迎的。...说Zorro是国内最受欢迎的Angular组件库,相信没有人会反对。 2017年8月,Zorro正式开源并发布第一个版本:0.5.0-rc.0,经过一年的演进,于第二年6月发布1.0版本。

    1.8K30

    Ng-Matero V10 正式发布!

    Angular v10 在六月下旬就悄无声息的发布了,虽然 v9 的发布延期了两个月,但是 v10 并没有受影响,仍然如期而至。...相比 v9 的重量级发布,v10 并没有颠覆性的变化,主要还是 bug 修复及细节优化。...再来说一下 Angular Material, v10 有一个非常大的变化,就是增加了 datepicker 的区间选择功能,不用多说,这是一个极其实用的功能。...在 Angular v10 发布不久,立即就有人提 issue 要求 Ng-Matero 也升级到 v10,由于受限于第三方组件库及其它细节考虑,迟迟没有更新。...其实 v10 版本除了将 AngularAngular Material 升级之外,主要是调整了 schematics ng add 的兼容问题,其它代码和 v9 最新版是一样的。

    1.4K10

    Hoppscotch:开源 API 开发工具,快捷实用 | 开源日报 No.77

    团队协作方面可以创建无限数量的团队成员和集合,在工作区中管理个人或者团队集合环境。 针对效率做了键盘快捷键优化设计。 通过启用代理模式解决 CORS 问题。 国际化体验更好地满足用户需求。...以项目为基础 频繁测验 包含多种主题:数据科学原理、伦理概念、统计与概率分析等 angular/components[4] Stars: 23.7k License: MIT Angular 官方组件是由...Angular 团队构建和维护的,包括常见 UI 组件和工具,以帮助开发者构建自定义组件。...@angular/material:为 Angular 应用提供 Material Design 风格的 UI 组件。...@angular/google-maps:基于 Google Maps JavaScript API 构建的 Angular 地图相关组件。

    45010

    看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件

    Angular15新特性 Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点让Angular一问世便取得了巨大的关注和流量...基于MDC的组件发布到稳定版 Angular15优化了基于Material Design Components for Web(MDC)中Angular material对于组件的重构,这样使得 Angular...更加接近Material Design的规范。...语言服务中的自动导入 在Angular15中,可以自动导入在模板中使用但是没有添加到NgModule中的组 件或独立组件。 既然Angular都升级了,咱们是不是可以尝试一些新的玩法?...传统的报表需要从浏览器下载之后再用Excel打开才能修改数据,那么,有没有一种插件可以实现直接在浏览器中修改Excel报表数据呢?答案是肯定的。

    36220

    Ng-Matero 0.1 发布了!

    接下来还会继续扩展 schematics 以及写一些 vscode 插件,整个项目还有很多需要完善的地方,不知道还有没有那么大的精力。年龄大了,已经明显感觉到心有余而力不足。...切记在新建 angular 项目的时候一定要选择 scss,因为没有做兼容处理,选择其它格式会有点问题,可以在 angular.json 中修改主样式入口。...其它参数大家可以自己尝试一下,这里借鉴了 material 的参数项。 版本号 因为还有很多需要完善的地方,所以短期内不会发布正式版。...因为 ng-matero 是基于 material 组件库,所以可以第一时间更新 ng 的最新功能?。...另外主题系统还不够灵活,样式编写需要向 material 学习,增强定制性,优先选择 mixin 编写。我会在之后的文章中介绍 material 的一些设计亮点。

    66310

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

    matero-poster.jpg 前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。...经过一个多月的设计与思考,我开发了这款基于 Angular Material 的中后台管理框架,初期架构设计已经完成,在接下来的版本中会提供 schematics 支持及 vscode snippet...同时,为了弥补 Material 的不足以及更好的发挥框架的优势,我创建了另外一个项目以扩展 Material 的组件库。 因为目前还没有完善的文档,所以本篇文章会简单介绍一下框架的使用。...目录结构 先看一下目录结构,这个目录结构遵循了 Angular 的最佳实践,尽量保证结构的规范化与合理性。...showUserPanel: true, dir: 'ltr', }; // 设置布局,注入服务,初始化数据后可以执行如下方法 this.settings.setLayout(options) 目前关于配置布局的设计还没有想好

    3K20

    Angular 6.0 即将发布 承诺更小更快更易用

    第二个是谷歌将所有的 Angular 源代码放在一个存储库中,这意味着 Angular 的每一个变化都已经在谷歌的超过 500 种产品中使用。...6.0 版本的关键功能是将所有版本的框架结合起来,这意味着核心路由器,平台浏览器,CLI,Angular Material 和其他解决方案的最新版本将一起发布,以便开发人员更好地访问最新版本的 Angular...例如,团队正在增加服务引用模块的能力,这样如果服务没有被使用,它就会消失,从而简化包的大小。 版本 6 也更新为 RxJS,即,使用 Observables 进行反应式编程的库 。...根据 Angular 的说法,这使得编写异步或基于回调的代码更容易。...版本 6 的另一个预期功能是用于 Angular Material 和 Component Dev Kit 的树组件。 除了 6.0 版之外,该团队正在重写视图引擎并增加对 Bazel 的支持。

    96920

    Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?

    但你团队的其他成员呢?你手下的那些人呢?或者当你的决定把你自己陷入困境的时候呢? 这种情况下,我们将会看到一个不用框架的团队在展开冒险,最后他们会发现自己创建了一个需要自己着手维护的框架。...我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用这个更大的关注点,如果不及早确定下来,这将会导致整个项目难以维护,在实际项目中,运行时提供不属于核心框架的技术往往让人觉得不可思议...Angular 团队对于 web 组件和渐进式 web 应用没有一个真正解决方案。...如果你对 Google Material UX 设计模式满意,那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。 React + Redux 有什么优势?...Dojo2 也知道它不单单只是在自己的生态圈发展,通过包含 web 组件导入和导出功能,也意识到需要支持不同的应用实例,但它依旧提供了一个结构化和固有的框架价值,Dojo2 的核心基础仍然是专注于提供交互性

    2.3K50

    Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点?

    但你团队的其他成员呢?你手下的那些人呢?或者当你的决定把你自己陷入困境的时候呢? 这种情况下,我们将会看到一个不用框架的团队在展开冒险,最后他们会发现自己创建了一个需要自己着手维护的框架。...我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用这个更大的关注点,如果不及早确定下来,这将会导致整个项目难以维护,在实际项目中,运行时提供不属于核心框架的技术往往让人觉得不可思议...Angular 团队对于 web 组件和渐进式 web 应用没有一个真正解决方案。...如果你对 Google Material UX 设计模式满意,那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。 React + Redux 有什么优势?...Dojo2 也知道它不单单只是在自己的生态圈发展,通过包含 web 组件导入和导出功能,也意识到需要支持不同的应用实例,但它依旧提供了一个结构化和固有的框架价值,Dojo2 的核心基础仍然是专注于提供交互性

    2.9K00
    领券