草庐IT

Material-Animations

全部标签

android - 将 Material Design Touch Ripple 应用于 ImageButton?

我有一个图像按钮,当它被点击时,它不会响应触摸动画,因为它是一个静态图像,不像Lollipop上的常规按钮,它带有内置的波纹效果。我想为图像添加Material设计波纹触摸效果,但似乎找不到实现它的方法。我可以在图像上设置一个滤色器,但这不是涟漪效应。我正在尝试做的一个示例是,当您在GooglePlay音乐中拿着专辑封面图片时,阴影波纹在图片上移动。 最佳答案 为了更好的结果: 关于android-将MaterialDesignTouchRipple应用于ImageButton?,我们在

javascript - Material Design Lite - 更改抽屉图标颜色

我找不到更改抽屉汉堡包图标的方法。让我们用代码来说话:代码drawericoncolor输出图标似乎是在颜色设置为白色之后动态添加的:当我从我的Chrome控制台改变它的颜色时,一切都很好。但是,如果我尝试使用css类,它就不起作用:.mdl-layout__header.mdl-layout__drawer-button{color:#000!important;}我的问题除了通过DOM动态更改颜色或直接扰乱material.min.js之外,我还有其他解决方案吗?(也没有使用javascript成功更改颜色)document.querySelector(".mdl-layout__

html - 如何增加 AngularJS Material 日期选择器的宽度

我有这样的东西:如何使“招聘日期”和“向下数组”下的行适应flex="50"中的一半布局。对于普通输入字段来说,这非常简单。当前标记:datemonths 最佳答案 查看这些门票:https://github.com/angular/material/issues/9550https://github.com/angular/material/issues/9483由于布局问题,此功能将不会实现。但是有一个变通解决方案描述了here 关于html-如何增加AngularJSMateria

javascript - 棱 Angular Material

所以我已经为我的系统安装了angular、angular-material、angular-aria、angular-animate依赖项。我只是想测试一下这个即将到来的造型方法。看来我一开始就卡住了。你能告诉我代码有什么问题吗?这是我的3个文件。应用程序.js样式.cssindex.html我的输出是{{title1}}在网页的顶部。angular.module('MyApp',['ngMaterial']).controller("MyController",function($scope){$scope.title1='Lol';});.buttondemoBasicUsages

html - 想要在右上角出现菜单图标按钮。在 Material Design Lite 中

我想移动右上角的菜单图标按钮。但它出现在标题下。我应该添加什么样的属性?Titlemore_vertSomeActionAnotherActionDisabledActionYetAnotherActionTab1Tab2Tab3Tab4hereisaimageurl 最佳答案 要使菜单显示在右侧,您需要在mdl-layout__header-row元素中添加以下div,然后添加您想要的任何元素头部的右侧。请参阅Layout上的MaterialDesignLite更多细节。TitleLinkLinkLinkLinkmore_vert

html - Angular Material Not Locked 侧边栏

我有一个这样的侧边栏:按钮1按钮2此入门应用程序由工具栏、SideNav(带有两个按钮)和内容区域组成。这里是内容区!当前行为-当我远程控制md-is-locked-open属性并在用户单击按钮时开始显示边栏,则边栏是全屏且不在内容区域内。所以它与锁定版本有以下几点不同:它在工具栏上主要内容变灰它在内容区域上RequiredBehaviour-我必须更改什么才能将其包含在内容区域内?所以它看起来和锁定时完全一样。应该在工具栏下面不应与主要内容重叠(只需将其向右移动即可=不应使其他内容变灰代码笔Here 最佳答案 只需更改:在side

html - Angular Material Flexbox - 如何在包装行之间添加边距?

我正在使用AngularMaterial及其flexbox功能。我现在遇到了一个在我看来应该很简单的问题,但我遇到了问题。我创建了this用于演示我的问题的Codepen。所以我有一行元素超过该行的100%并且启用了换行,所以我得到两行没有边距的元素,如下所示:我正在使用这个CSS:.row{background-color:grey;padding:10px;}.item1{height:200px;background-color:blue;}.item2{background-color:red;}.item3{backgronud-color:black;height:100p

html - Angular Material : How to change top padding of mat-grid-tile

我正在使用angular-materialAngular为5.mat-grid-tile有它自己的顶部填充,使用calc方法计算。我想在mat-grid-tile上设置自定义填充。我该怎么做? 最佳答案 网格图block组件会在元素本身上动态设置顶部内边距,因此您需要在CSS中使用!important修饰符来覆盖它。HTML:CSS:.my-grid-tile{padding-top:24px!important;} 关于html-AngularMaterial:Howtochanget

html - Material UI Drawer 不会在 Appbar 下移动

我有一个Appbar和一个抽屉就在它下面。在这两个组件下,我有3个带有Bootstrap的div,在每个div中,我都有一组按钮。问题是Drawer覆盖了Appbar,我似乎无法移动它。这是我的代码:title1212MohnweckerlWienerGouda在第一个bootstrap列之后,另一个"col-sm-4"紧随其后,然后是"col-sm-2"。这些按钮位于GridList中这是视觉效果抽屉应该从箭头相交的地方开始。有什么想法吗? 最佳答案 Material-UI文档将其称为抽屉clippedundertheappbar

javascript - Angular Material 中居中对齐的网格列表

我想在AngularMaterial中获得居中对齐的网格列表。这是我的代码:{{item.name}}我得到这样的结果:但我想这样:我希望同一个网格列表居中对齐。这是fiddlecode. 最佳答案 您可以使用CSSFlexbox。使用display:flex和使用justify-content:center让你的父级(即md-grid-list)成为一个flex容器将其子项(即md-grid-tile)水平居中对齐。喜欢:md-grid-list{display:flex;flex-wrap:wrap;justify-conten