开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular Material css在Slider上不工作

Angular Material是一个UI组件库，它提供了一套现成的、美观的UI组件，可以帮助开发者快速构建用户界面。Slider是Angular Material中的一个组件，用于创建滑块控件。

在使用Angular Material的Slider时，如果发现CSS样式不起作用，可能有以下几个原因：

引入样式文件不正确：确保已正确引入Angular Material的CSS样式文件。可以通过在index.html文件中添加以下代码来引入样式文件：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@angular/material@12.2.9/prebuilt-themes/indigo-pink.css" rel="stylesheet">

组件未正确导入：在使用Slider之前，需要在相关的模块中导入SliderModule。确保在使用Slider的组件所在的模块中添加以下代码：

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    // ...
    MatSliderModule
  ],
  // ...
})
export class YourModule { }

版本不兼容：确保使用的Angular Material版本与Angular版本兼容。可以通过查看官方文档或使用npm命令来安装最新版本的Angular Material。
自定义样式冲突：如果在项目中自定义了一些CSS样式，可能会与Angular Material的样式冲突。可以通过调整样式的优先级或使用CSS选择器来解决冲突。

相关搜索:Angular material 2 SnackBar不工作 Angular CLI CSS不工作在mat中使用Angular Material ngTemplateOutlet -选择不工作 CSS Slider与HTML不工作-该怎么办？Angular material的进度循环指令不工作 Angular material Dragable对话框不工作是否可以在不创建angular应用程序的情况下使用angular material CSS？css-网格，最大高度在Chrome上不工作？ngStyle在Angular中不工作 .$save在angular中不工作 Angular *ngFor & Materialize-CSS可折叠不工作 FlexLayout 7.x.x.beta angular在angular 7上不工作 Animate.css动画fadeInDown添加@angular/material后停止工作 Angular的LifeCycle挂钩ngOnDestroy在移动设备上不工作 Angular $http.get在我的设备上不工作 keen slider在next.js上不能很好地工作 Angular 2在IE中不工作 EventEmitter在Angular 2中不工作在NgOnInit中，Angular SetValue不工作如何使用Material UI withStyle为css类应用样式。WithStyle不工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Ng-Matero v15 正式发布

另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明： Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件我觉得 v15 最大的变化不是 Angular，而是 Angular Material。...说一下自己的感受：在第一次得知 Angular 官方将在 v15 全面迁移 MDC 时，内心还是很抵触的，主要是觉得 MDC 的很多效果做的不如 Angular Material 细腻（比如 form-field...影响最大的组件应该是 slider 和 chips，之前的写法都会报错，必须手动修复。...Angular 官方还专门写了一篇文章来介绍这件事，建议使用 CSS 来替换 Flex-Layout。

5.5K4 0

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

官方文档是这么描述的（译者注：为清晰理解，该描述不翻译）： ControlValueAccessor acts as a bridge between the Angular forms API and...简单的封装器最基础实现是通过简单封装使其能在屏幕上显示出来，所以我们需要一个 NgxJquerySliderComponent 组件，并在其模板里渲染出 slider： @Component({...(); } } 这里我们使用标准的 jQuery 方法在原生 DOM 元素上创建一个 slider 控件，然后使用 widget 属性引用这个控件。...在 writeValue 方法内我们把得到的值传给 slider 组件。现在我们把上面描述的功能做成一张交互式图： ?...你可能注意到 formControl 指令实际上简化了与父组件交互的方式。

3.8K2 0

后台管理UI的选择

官网：http://jui.org/ 下载：https://github.com/dwzteam/ 三、HUI H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT...Scroll Pace Bootstrap Social Buttons 特点：响应式布局，支持多种设备打印增强丰富可排序的面板组件 18个插件与3个自定义插件轻量、快速兼容主流浏览器，IE8不兼容...Full Version Angular Seed Project Angular Seed Project Grunt Angular Seed Project Gulp Angular Seed...10. material-dashboard Github Star 数 7111，Github 地址： https://github.com/creativetimofficial/material-dashboard...基于 Bootstrap 4 和 Material 风格的控制面板。

5K2 1

Angular Material 的设计之美

顺便插一句，如果大家纠结用 Sass 还是 Less，可以看一下这篇文章 CSS 预处理器中的循环，个人不建议用 Less，请原谅我无意引战?。...把这句名言用在 Angular Material 上丝毫不为过，其实除了我们看到的组件之外，Material 还有一些隐藏组件，比如可以用 menu 组件构造 popover，我会在下文中介绍。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。...mat-table 对表格列宽的首选操控方式是 CSS，起初我对这种方式也存在疑虑，但是在我亲自封装了 ng-zorro-antd 的表格组件之后，我发现一切都很自然。...这让我想起前端流行的一句话，“凡事能用 CSS 完成的就不要用 JS”，这也是我不建议大家用 Less 的原因之一。 ng-matero 的表格示例是最简单的业务表格，可以参考其实现方法。

5K3 0

AngularDart Material Design 应用布局顶

构建样式由包提供：angular_components/app_layout / layout.scss.css。.... --> 应用栏和抽屉交互应用栏和抽屉协同工作，为应用程序提供全面的应用布局。应用栏可以存在于material-content之内或之外。...这是使用标准material-list组件和一些特殊的CSS类来完成的。顶级抽屉内容应该是具有可选组元素的MaterialListComponent，这些元素由元素上的group属性指定。...对于每个组，如果您需要组上的标签，请在组元素内直接使用块元素上的label属性。...需要在包含组件的styleUrls列表中包含packages：angular_components/app_layout / layout.scss.css。适用于延期内容。

4K3 0

前端组件库_前端组件库有什么好处

前端框架(Frameworks) Bootstrap Foundation Amaze UI Semantic UI Pure CSS topcoat UIkit Material UI Framework7...JavaScript 框架汇总 JavaScript 框架 react Angular jQuery Backbone.js Ractive.js KISSY Zepto.js Vanilla JS...页面交互 13.1 Slider slick – the last carousel you’ll ever need Swipe – the most accurate touch slider Swiper...responsive carousel slider jquery-mousewheel – jQuery鼠标滚轮滚动侦测插件 13.2 瀑布流 Masonry Isotope – Filter &...Hammer.js jquery.event.move.js 13.17 拖拽组件 Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏

6.3K1 0

angular4实战（1） angular-cli

在下载好angular-cli之后，通过在命令行输入ng help可以获得angular-cli的指令详细介绍。 ? 如果新建一个项目仅仅用上述5条，显然是不满足开发需求的，在介绍5条属性。...—style 指定生成项目的css预编译语言，例如 ng new PROJECT-NAME –style less 则创建的项目，由less开发。...—prefix 默认是app，可以选择改成其他的，如果不设置，那么项目生成的组件选择对象就是app开头，即： ?...—routing angular生成的项目默认是不带路由的，而路由在但也应用基本上是必备模块，因此在生成项目时需添加此属性。...本章对angular-cli的介绍到此为止，下章具体介绍路由。项目地址：https://github.com/jiwenjiang/angular4-material2

6682 0

Cesium几个案例介绍

一、监听HTML控件在Cesium中可以很方便的监听前台HTML控件，类似C#等语言中的MVVM。 1.1 前台控件前台控件效果如下： ?...selectedType').subscribe(function(options) { var values = options.values; ... }); 其实也就是多了一步，在定义...--css--> #slider { position: absolute; left: 50%; top: 0px; background-color: #D3D3D3...= document.getElementById('slider'); viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth...+ relativeOffset) / slider.parentElement.offsetWidth; slider.style.left = 100.0 * splitPosition

12.9K5 0

Angular8稳定版修改概述

新功能差分加载根据您的browserlist 文件，在构建期间，Angular将为其创建单独的包polyfills。所以基本上你会有： ? 使用此功能将减小捆绑包大小。 ?...但这是如何工作的？基本上，Angular将使用polyfill构建其他文件，并且它们将注入nomodule 属性。...在一个域中支持多个应用。阅读Angular Doc上有关服务工作者的更多信息。表单改进添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...@angular/http @angular/http在Angular 5中不推荐使用package，但由于@angular/platform-server依赖于它，所以仍然可用。...您可以运行ng update @angular/core以迁移现有代码。 Angular Material Angular Material工程重命名为Angular Components。

4.5K2 0

Mark！Android最佳的开源库集锦

一个好的开发库可以快速提高开发者的工作效率，甚至让开发工作变得简单。本文收集了大量的Android开发库，快来切磋一下，到底哪一个最适合你。...Material File Picker：一个Material design风格的文件选择工具。 ➤函数式编程 Retrolambda：可以在Android上使用Lambdas表达式。...➤GIF android-gif-drawable：在Android上显示GIF图片。 GifView:Android上的另一个显示和绘制GIF的库。...Calligraphy:在Android应用程序上轻松使用自定义字体。...➤Slider SlidingMenu：可为应用程序创建侧滑菜单的库。 MaterialDrawer：Material Design风格的侧边抽屉库实现。

2.1K7 0

都 9012了，该选择 Angular、React，还是Vue？

以下是Angular 7 针对性能、命令行工具和Material Design组件的优化项：性能方面：Angular 7 新增的虚拟滚动优化了单页面的呈现方式，对于那些吸引访问者继续向下滚动的clickbait...Angular 7 虚拟滚动命令行提示：当在CLI中键入某些命令，如 ng new 或者 ng add @angular/material 时，Angular 7 会提示用户，让你找到像路由或SCSS...视觉风格：谷歌在Angular 7之前已于2018年更新了Material.io，用户更新后会出现细微的视觉差异：如，UI结构层次更为大胆、形状的边角更加圆滑，五种全新的 Icon 样式，以及一个非常时尚且现代化的拖放模块.../ common / http 的Ajax请求用于构建 @angular /forms 的表单组件CSS封装 XSS保护用于单元测试组件的实用程序其中，依赖注入等功能作为 Angular 的核心...2014年2月（在微软收购GitHub平台四年之前），Evan You在GitHub上发布了第一个稳定版本的Vue，标志着一个构建数据驱动的 Web UI的渐进式框架就此诞生。

1.9K2 0

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目下面是年度最流行的项目，不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军，今年在 GitHub 上新增了超过 40,000 的 star。...有一种叫Angular 准则的最佳实践用来指导开发。这可能给人一种 Angular 对于多人协同工作更友好的印象。...Ant Design，Ant Design Pro 和 Material UI 是 React 组件的样式工具集，它们能帮助程序员在新建应用时而不再担心样式设定方面的问题。...一般情况下，在搭建自己的构建工作流时需要编译器可能有2个原因：想享受到最新 JavaScript( ES7 标准) 的特性，并把它应用到尽可能多的浏览器中。...它利用 JavasScript 最近新加入的模板字符串特性，让开发者在 React 组件中使用标准的 CSS 语法编写样式。 CSS Modules，作为本类别的亚军，则采用了混合的解决方案。

2.7K5 0

AngularDart 4.0 高级-结构指令顶

但它确实解释了它们是如何工作的以及如何编写自己的结构指示。指令拼写在本指南中，您将看到UpperCamelCase和lowerCamelCase拼写的指令。你已经看到了NgIf和ngIf。...在这个例子中，[ngClass] =“odd”保留在上。微语法 Angular microsyntax允许您以紧凑友好的字符串配置指令。...虽然很少有理由在模板属性或元素形式中应用结构指令，但了解Angular创建并了解它的工作原理仍然很重要。当你编写自己的结构指令时，你会参考。...事实上，在呈现视图之前，Angular用注释替换及其内容。如果没有结构指令，而只是将一些元素包装在中，那些元素就会消失。比如短语”Hip! Hip!...在没有合适的宿主元素时使用作为分组元素。 Angular将星号（*）语法解析为。 NgIf，NgFor和NgSwitch内置指令如何工作。

16.1K2 0

Angular vs React 最全面深入对比

OK，开始… … 成熟度作为一名成熟的开发人员或者是能够决定架构及技术走向的人员，一项必备的技能就是能够在工作和项目中平衡成熟技术与最前沿框架之间的关系，既能保持人员及技术的前进，又能保证项目或产品的交付质量...与类似目的的TypeScript不同，它不需要开发人员迁移到新语言，并为你的代码注释类型检查工作。在流程中，类型注释是可选的，可用于向分析器提供其他提示。...Material design components 如果您热衷于设计Material，您会很高兴听到Angular有一个Material组件库。...Material UI 还有一个可用于React的Material Design Component。与Angular的版本相比，这个版本比较成熟，可以使用更广泛的组件。...它提供了一种在服务器上完全或部分呈现应用程序的灵活方式，将结果返回给客户端并在浏览器中继续。

3.8K7 0

15 个优秀的响应式 CSS 框架

Bootstrap 最受欢迎 Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先项目。Bootstrap 使前端开发更快、更轻松。...Material Design for Bootstrap MDB 建立在 Bootstrap 之上，并提供了开箱即用的材料设计外观。...它具有出色的 CSS 库，并且与大多数流行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其核心库是完全免费使用的。...material design light framework Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可为你的网站添加 Material Design...以在它的基础上根据自己的需要添加样式和响应实用工具。官网：https://picturepan2.github.io/spectre/ 15. Base CSS Framework ?

11.1K1 0

Angular2入坑指南

概念与区别本人也在React与Angular两大体系里纠结了好久，还使用React Native做了几个UI，彷徨于两大前端框架之前。...对UI的描述自成一体，而不是采用CSS或者SCSS。...，概念也是特别多 3、体量大 4、成熟度相对偏低，版本2才刚发布 5、不兼容1.x 6、Router还不成熟综合以上我最终决定选择Angular2作为我前端开发的首选框架。...同时还有以下几个Bonus：配置nativescript写原生应用，并且nativescript支持css子集，这一点比react要强一些，可以更小的降低学习成本与维护成本。...有官方的UI方案Material Design供选择官工具链相对于React要成熟有angular-cli这个便利化的工具，并提供E2E的测试，用以方便测试，并保证项目的质量。

2K7 0

npm依赖(框架平台)

UI框架 flat: Jquery双端UI框架 foundation: Jquery双端UI框架 framework7: 无依赖移动端UI框架 hexo: 博客框架 iview: Vue桌面端UI框架 material...: React双端UI框架 material1: Angular1双端UI框架 material2: Angular2+双端UI框架 metro: Jquery双端UI框架 mint: Vue移动端UI...ant-motion: React动画引擎 prop-types: React组件参数验证 react-amap: React地图组件 react-beautiful-dnd: React拖拽组件 react-css-modules...webpack-dev-middleware: Webpack本地服务器 webpack-hot-middleware: Webpack模块热替换结语写到最后总结得差不多了，后续如果我想起还有哪些框架平台遗漏的，会继续在这篇文章上补全...欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。

2.5K2 0

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

实际上，组件是指令的一种类型。以组件为基础的架构模式是现在Web 前端开发的主流方式。不仅仅在Angular 中，在类似的React、Ember 或Polymer 等框架中也是很常见的。...Angular 在技术架构上倾向于平台化设计，其跨平台开发特性使得周边生态圈变得更加繁荣兴旺。 ?...在此之上，还有不少其他的外部工具库，类似于： Angular Material，Google 官方的Material 设计风格的UI 组件库。...除了这些，Angular 周边也有完善的工具体系： Angular CLI 为开发者提供了工作流自动化解决方案。...其功能涵盖了创建项目、生成组件、配置路由、代码格式化、启动开发服务器、构建测试、运行测试、预处理CSS 样式和部署前的构建，等等。

9.1K1 0

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

Switch 的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器，简洁小巧 sensor.js: 在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能...-video-player: Paypal 出品的 Video 播放器 loading: 几种 Loading 效果，基于 SVG flippant.js: 一款能够漂亮的网页元素翻转效果库，代码许久不更新...: Angular 中用来处理 RESTful API 的插件，可替代 $resource ng-cordova: Cordova 常用组件的 Angular 版本 angular-translate:...: React 的 Angular 插件，可以在 Angular 中使用 React Components material: Google Material Design 效果的 Angular 实现.../ Foundation FrozenUI 移动端服务的前端框架 materializecss 基于Material Design的主流前端响应式框架 mui 最接近原生APP体验的高性能前端框架 http

5.7K9 0

AngularDart Material Design 卡片顶

自述 Material Card 材料卡是由Google材料团队（也称为mdc-web）提供的卡片样式。这是一个允许在AngularDart应用程序中使用样式的包装器。...建立样式由包提供:angular_components/css/mdc_web/card/mdc-card.scss.css。...要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。我们建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。...selector: 'my-component', templateUrl: 'my_component.html', styleUrls: [ 'package:angular_components.../css/mdc_web/card/mdc-card.scss.css', 'my_component.scss.css']) class MyComponent {} MaterialCardExample

7044 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭