matRipple的背景色
matRipple是一种前端开发中常用的UI效果，它可以为网页元素添加类似于水波纹的点击反馈效果。当用户点击一个带有matRipple效果的元素时，背景色会以波纹状从点击位置扩散开来，给用户一种视觉上的反馈。
matRipple可以用于增强用户体验，使网页元素更加具有交互性和动态感。它在Web应用和移动应用开发中广泛应用，特别是在按钮、链接、卡片等用户可以点击的元素上。
matRipple效果的优势在于它简单易用、轻量级且无依赖，可以通过添加一些CSS类或JavaScript代码来实现。此外，matRipple效果还能够与其他动画效果或过渡效果结合使用，进一步提升用户体验。
腾讯云的相关产品中，可以使用云函数（SCF）来实现matRipple效果。云函数是一种无需管理服务器即可运行代码的云服务，开发者可以使用云函数来编写前端代码，实现matRipple效果。通过腾讯云的云函数，可以方便地将matRipple效果部署到云端，并在Web应用或移动应用中使用。
以下是腾讯云云函数（SCF）的产品介绍链接地址： https://cloud.tencent.com/product/scf
相关·内容
我正尝试在单击时在表行中使用matRipple。然而，涟漪效应在特定的表行tr .However之外流动，它在table td.中起作用，效果应该在边界内，因为它在MatButton中发生。
链接：-
<table>
<tbody>
<tr matRipple (click)="callalert()">
<td>sss</td>
<td>ssssss</td>
</tr>
&l
浏览 9提问于2018-12-13得票数 2
回答已采纳
1回答
我知道我可以在div上触发涟漪效应，就像在这个中
但这只适用于第一个具有纹章指令的元素。如果在指令中有两个元素，如下所示：
<div matRipple #rippleOne>
rippleOne
</div>
<div matRipple #rippleTwo>
rippleTwo
</div>
现在我怎么才能触发第二个涟漪呢？试过这个：
@ViewChild(MatRipple)
rippleTwo: MatRipple;
...
this.rippleTwo.launch({});
这是行不通的。
也是
@ViewChild(&
浏览 0提问于2018-10-26得票数 0
回答已采纳
2回答
我刚刚将matRipple属性添加到我的div中，如下所示：
<div matRipple class='icon-wrapper'>
...
</div>
红色边框是div元素的实际大小。如您所见，涟漪动画避开了div元素的界限。如何隐藏溢出的涟漪动画？overflow: hidden没有特效。
浏览 19提问于2018-08-20得票数 2
回答已采纳
在我的component.scss文件中，我有一个混合变量，我试图为div元素设置波纹颜色。
如果我在中设置了一个直接的颜色值(如: matRippleColor="red" )，则会应用波纹颜色并使用working。
但是，如果我将混合变量的名称或scss类名给matRipplecolor，则波纹颜色是未应用。
component.scss flie
@import '~@angular/material/theming';
@mixin dashboard-component-theme($bg-ripple) {
.rippleCOLOR
浏览 1提问于2019-01-16得票数 0
我想开始一个关于用户与matRipple属性指令交互的动画。 我在<i matRipple class="material-icons">create</i>上试用过，并从@angular/material导入了MatRippleModule，如下所示： import { MatRippleModule } from '@angular/material';
imports: [
MatRippleModule
] 如果我单击该元素，什么也不会发生，甚至不会收到错误消息。为什么它对我不起作用？
浏览 27提问于2020-01-15得票数 1
回答已采纳
我有2 ng-Template和第一模式是打开另一个。当我隐藏顶部模式时，它也会隐藏下面的模式，只留下黑色背景，应用程序不可用，我必须手动刷新浏览器。在我们升级到angular 7到10之前，它工作得很好。 从‘ngx-bootstrap/modal’导入{ BsModalService，BsModalRef}； closeTestPopup1()
{
this.modalRef.hide();
}
openpopup2(template)
{
this.modalRef2 = this.modalService.show(template, { cl
浏览 62提问于2020-12-24得票数 0
2回答
我试图增加一个按钮的连锁反应，但它崩溃了整个网页。当我将matRipple添加到我的按钮时，什么都不会发生。当我试图添加颜色[matRippleColor]="white"，我得到“不能绑定到'matRippleColor‘，因为它不是一个已知的属性’按钮‘”。
这很奇怪，因为我启用了其他网页上的涟漪，而且效果很好。(是的，我已经导入了MatRippleModule)：
HTML：
<button matRipple class="submit-button" color="accent" type="submit&
浏览 6提问于2019-05-30得票数 2
1回答
点击后保持角质层毛刺动画
、、、、
我使用垫-列表与matRipple的点击动画。通常，垫波纹动画消失一段时间后，它可以用RippleGlobalOptions控制，但我想保持动画后，点击后，背景颜色不会改变。那么，有没有可能保持背景风格呢？
<mat-list #selectable
role="list">
<mat-list-item *ngFor="let item of ItemsSource; let i = index;"
(click)
浏览 0提问于2020-04-28得票数 1
回答已采纳
我正在尝试在单个组件中使用多个路由器插座。下面是一个代码示例。 <div>
<button matRipple matRippleColor="#FFFFFF20" class="btn btn-lg buttonLarge mx-4" [routerLink]="[{ outlets: {myoutlet: ['componentOne']}} ]" matTooltipPosition="below">
Navi
浏览 19提问于2021-10-23得票数 0
回答已采纳
1回答
如果我使用<span matRipple matRippleColor="red">Text</span>，所有的东西都变红了，我不能再读我的文字了。 Stackblitz 有没有办法只把背景变成红色而不把文本变成红色？
浏览 15提问于2020-01-15得票数 0
回答已采纳
我已经创建了一个包含文本的样例div，如
<div class="mydiv" matRipple matRippleColor="rgba(255,255,0,.5)">
Click Me!
</div>
它的工作原理，除了黄色出现在“点击我”的文本，这看起来不对。我是不是漏掉了什么？
请参阅
浏览 0提问于2019-03-14得票数 1
回答已采纳
1回答
只有当用户可以选择该元素时，我才想添加一个Ripple效果。为此，我现在将canSelect属性从父组件发送到子组件，如果canSelect是真的话，那么只应该添加Ripple效果。
这就是我迄今尝试过的：
组件
@Input() canSelect?: boolean = false;
Html模板
<div [attr.matRipple]="canSelect ? '' : null"> select </div>
浏览 1提问于2019-04-30得票数 1
回答已采纳
如何将mat-ripple指令添加到我创建的自定义指令的主机元素中？关键是让mat-ripple自动添加到我也添加my-custom-directive的任何元素中。
因此，如果我将<button my-custom-directive>Button</button>添加到模板中，则应该将其呈现为<button my-custom-directive mat-ripple mat-ripple-color="#000">Button</button>，而不必每次使用my-custom-directive时都输入所有这些内容。举个例
浏览 4提问于2018-01-12得票数 2
回答已采纳
<button _ngcontent-c50="" class="mat-menu-item ng-star-inserted" mat-menu-item="" role="menuitem" tabindex="0" aria-disabled="false"> 11 - teste <div class="mat-menu-ripple mat-ripple" matripple=""></div></button>
浏览 1提问于2019-12-04得票数 1
2回答
所以我有一个待办事项列表，每个都有一个涟漪，当你点击待办事项时，我想将页面路由到一个新的URL，但我希望在此之前完成波纹动画。
在角4+中，我找不到一种容易做到这一点的方法，到目前为止，我想出的唯一解决方案是下面的一个，有“正确”的方法在角上这样做吗？
构成部分：
export class TodoListComponent {
public todos = this.todoService.todos$;
@ViewChildren(MatRipple) private ripples: QueryList<MatRipple>;
constructor(priv
浏览 0提问于2019-01-03得票数 1
回答已采纳
2回答
角垫台消除波纹
、、
我有一个带有matRipple效果的可点击行的角材料表。在表格中，我有一个按钮作为其中一行。当点击按钮时，它会发出一个事件，到目前为止，我已经停止了事件传播，这很好地防止了这两个元素检测到单击事件。是否有一种方法可以仅在单击按钮时立即取消父行的连锁反应？
浏览 20提问于2019-01-24得票数 2
回答已采纳
我在Tab中有一个简单的按钮，如果设置了Tab-Group的backgroundColor属性，按钮就会松开它的涟漪效应。
<mat-tab-group [color]="primary" [backgroundColor]="'primary'">
<!-- Try Removing the [backgroundColor] property in the above line
and click the button to see the ripple effect-->
<mat-tab
浏览 0提问于2019-01-14得票数 1
回答已采纳
我有个问题。
如何使用*ngFor显示数据？我是这么做的，但数据没有显示。我太困惑了，因为我在角度上很新。有人能帮我吗？
我的观点：
<mat-tab-group animationDuration="1000ms">
<mat-tab label="Component">
<div class="drag-list">
<div class="drag-item" *ngFor="let components of filte
浏览 2提问于2019-10-23得票数 0
我在我的项目中使用了以下材料设计按钮：-
<button class="save-btn" mat-raised-button>Save Changes</button>
我想改变它的默认波纹颜色。我试过这个：-
<button class="save-btn" mat-raised-button matRipple [matRippleUnbounded]="false" [matRippleColor]="rgba(255,255,0,0.3)">Save Changes</butto
浏览 1提问于2022-08-24得票数 2
回答已采纳
我在运行单元测试的角度，我想触发一个点击事件，这是一个下拉点击它下降了一个客户号码列表。我想在我的单元测试中触发这个事件，如果这个事件被成功触发，我可以更新与点击按钮的索引对应的客户信息。我附上了必要的代码以供参考。请让我知道如何触发点击事件？
//template.html
<mat-menu #menuFilter="matMenu">
<button *ngFor="let customer of customers; let i = index" (click)="onCustomerChange(i)" ma
浏览 1提问于2019-04-09得票数 0
4回答
如何通过按钮的值隐藏按钮？
示例：
<button class="mat-raised-button mat-primary" color="primary" mat-raised-button="">
<span class="mat-button-wrapper">RESET</span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
浏览 48提问于2019-11-22得票数 0
<div id="col-container">
<mat-card id="profile-card" *ngFor="let candidate of obj_users; let i = index; ">
<img class=" candidates-image" mat-card-image src="{{candidate.photo }}" />
<mat-card-content>
浏览 19提问于2019-12-16得票数 0
我正在创建这个带有角11的图像上传组件
我有一个带有matRipple的drop区域，所以每当用户删除一个文件时，它都会显示出连锁反应。在这个div里面，我有可以左右旋转的按钮。当我点击这些按钮时，div的波动效应也会被触发。有办法让它失效吗？因此，如果用户单击该div中的一个按钮，则不会发生该div的连锁反应？我认为，通过将event.stopPropagation()添加到按钮事件处理程序中，它将停止它，但它没有。
这是我的组成部分：
<div class="container">
<div class="box" style="
浏览 0提问于2021-01-16得票数 2
回答已采纳
1回答
我试图定位一个svg图像在一个材料扩展面板的边界。问题是svg图像应该定位在面板的外面。
但是svg图像被裁剪了。我试过用z指数，但没有任何效果。
你知不知道？？
错：
预期：
css
.svg-class .mat-radio-container::after {
display: block;
content: url("../../assets/images/top-kondition3.svg");
overflow: visible !important;
margin: -31px;
}
html
<mat-e
浏览 0提问于2019-02-28得票数 0
回答已采纳
3回答
在这里，我想使用mattooltip="Edit project"或ng-reflect-message属性单击这个锚标记 <a _ngcontent-htr-c655="" mat-menu-item="" mattooltip="Edit project"
class="mat-focus-indicator mat-tooltip-trigger mat-menu-item ng-star-inserted" ng-reflect-message="Edit project"
浏览 74提问于2021-08-12得票数 0
1回答
在我的代码中，当单击按钮时，我试图通过链接显示和隐藏图像。现在，当我单击该按钮时，该图像将在Chrome的另一个选项卡中打开。但是我想把它显示在我的应用程序页面上。我需要将链接分配给TypeScript，以便稍后进行一些更改，但我无法理解。我怎么能这么做？
HTML：
<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display</button>
TS：
imageSource(){
windo
浏览 0提问于2021-06-04得票数 2
回答已采纳
1回答
以角度选择和复制文本
、、、
我试图让用户选择一个段落，并在他/她点击一个按钮时复制它。目前，我的代码是这样的，但它既不选择文本，也不复制它。我试图导入指令，但在导入过程中出现了错误，因此，我使用了下面的方法。我的密码怎么了？
HTML：
<p>
<span
id="sticker"
contenteditable
[textContent]="_stickerData?.StickerData"
(input)="onStickerDataChange($event.target.innerHTML)"
>
浏览 3提问于2021-04-28得票数 0
回答已采纳
这是我的父组件。
<div class="o-tile-container ">
<div *ngFor="let country of Countrys">
<app-country
[name]="name"
[count]="count"
浏览 1提问于2021-02-11得票数 1
1回答
我有一张可点击的卡片，我想把它做成一个组件。我想为实例的唯一名称(id)创建一个@Input，我可以在卡片的标题上使用aria-labelledby：
<div
class="card card-default category-widget"
id="{{ widgetID }}"
matRipple
aria-labelledby="{{widgetTitle}}"
role="button"
tabindex="0"
浏览 1提问于2019-04-04得票数 1
回答已采纳
1回答
角度赋值变量给链接
、、、、
在我的应用程序中，当点击一个按钮时，我会通过一个链接显示一个图像。目前，显示的句子是'Hello World‘。但我想通过链接显示我自己的数据，这是_stickerData?.stickerData。我怎样才能实现我想要的？
HTML；
<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display Image </button>
<img [src]="url" *
浏览 5提问于2021-06-04得票数 1
回答已采纳
5回答
我用的是有角度的材料
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
我试图添加一个图标到按钮，但我不知道如何做，也找不到这方面的文档。
在看医生的时候，有这样一个：
该按钮具有以下html：
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-but
浏览 17提问于2018-01-05得票数 92
回答已采纳
在实现角材料表时，我得到了以下错误。
错误：
类型'ListComponent‘上不存在属性'tpl’。
我在下面解释我的代码。
<div class="mt-9">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChange($event)">
<tr mat-header-row *matHeaderRowDef="d
浏览 5提问于2019-12-27得票数 0
2回答
我正试着在我的简单的角度页上探测到一个按钮。在检查按钮是否存在时，它总是返回false，而文本搜索总是返回true。
console.log(await button('New Page').exists()); - false
console.log(await button(below('title')).exists()); - true
console.log(await text('New Page').exists()); - true
html组件看起来有点像这样。
<button class="new-page-bu
浏览 4提问于2019-09-16得票数 1
回答已采纳
我想为我的background-color的.active类创建一个动态的mat-list-item
HTML：
<mat-list-item
*ngFor="let page of pages"
matRipple
routerLinkActive="active"
>
<a [routerLink]="page.path" (click)="drawer.close()"
><mat-icon class="mat-1
浏览 0提问于2020-08-20得票数 0
回答已采纳
通过使用创建了使用ngFor的dom元素，如下所示。
HTML
<div class="col-sm-2 p-1 eventDiv ripple-container" *ngFor="let actProd of actProdList;let i = index">
<mat-card matRipple class="p-0">
<div class="d-flex justify-content-center mt-2">
<div cla
浏览 0提问于2020-04-07得票数 0
回答已采纳
3回答
下面有搜索元素的代码。如果找不到该元素，请单击下一页。我想要的是，如果元素直到最后一页才被找到，它应该打印“元素未找到”。
elpath=f"//span[contains(text(),[value})]"
while True:
time sleep(2)
try:
driver.find element_by_xpath(elpath).click()
break
except Exception:
if driver.find element_by_xpath("Xpath to click
浏览 14提问于2021-07-30得票数 0
1回答
是否可以以编程方式将指令添加到具有给定类名的组件中的所有元素，可能会使用
document.getElementsByClassName("btn")
我希望将matRipple指令添加到所有使用btn类的元素中，而不需要我们的团队手动将该指令添加到每个元素中。
或者，我是否有另一种方法来将角物质指令应用于给定类或标签名的元素(例如button)？
请注意，这是针对遗留应用程序的，我们不想将它们全部切换到mat-button。这个指令工作得很好，但我正在寻找一种方法，使我们的devs更容易。
浏览 0提问于2019-03-15得票数 3
我很难让我的表索引出现。下面是一个示例表：
<mat-table [dataSource]="dataSource" multiTemplateDataRows>
<!--Column definitions-->
<ng-container matColumnDef="{{columnProp.name}}" *ngFor="let columnProp of columnProps; let i = index;">
<mat-header-cell
浏览 2提问于2018-11-28得票数 19
回答已采纳
我最初有一个ng引导程序(5.1.4)模式，并在页面模板中以内联方式打开它的按钮，如下所示：
<ng-template #basicMessage
let-modal>
<div class="modal-header">
<h2 id="modal-basic-title"
class="modal-title">Modal headline</h2>
<button type=&#
浏览 4提问于2020-01-16得票数 0
回答已采纳
1回答
我有一个月、年的日历，但当我点击顶部的按钮时，它会显示我的年、月和日，我如何隐藏该按钮或告诉日历不显示日
我在想一个隐藏该元素的css类，最好的方法是什么？
这是html
<button cdkarialive="polite" class="mat-calendar-period-button mat-button _mat-animation-noopable" mat-button="" type="button" ng-reflect-politeness="polite" aria-label=&
浏览 4提问于2019-07-30得票数 0
回答已采纳
我有一个订阅/取消订阅的按钮。在订阅的情况下，它调用userSubscribtions()函数，但我想要的是当用户在那之后单击unsubscibe时。它应该运行我的组件中定义的delSubscription函数。选中的选项卡是我在前端查看的选项卡。有没有办法做到这一点？下面是我的html代码，我在组件中有这两个函数。 <button matRipple type="button" class="btn btn-outline-success my-sm-0 mx-2 d-flex shadow-none"
(click)="use
浏览 12提问于2021-08-27得票数 0
1回答
排序适用于列Id，但不适用于第二列，为什么呢？
<mat-table #detailsTable #detailsSort="matSort" [dataSource]="details" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let de
浏览 12提问于2018-12-12得票数 1
下面是表格html：
<mat-table matSort class="inbox__messages" #table [dataSource]="dataSource">
<!-- Building Column -->
<ng-container matColumnDef="building">
<mat-header-cell *matHeaderCellDef>
<div class="inbox__messages__header">
<
浏览 0提问于2018-06-28得票数 10
回答已采纳
继承具有alpha的父背景色会使子背景色不同。为什么？
当父级使用alpha(rgba)作为背景色，而子级继承父级背景色时，为什么子级颜色与父级不同？
.parent {
width: 200px;
height: 200px;
background: rgba(2, 107, 227, 0.2);
}
.child {
width: 100px;
height: 100px;
background: inherit;
}
<div class="parent">
<div class="child">
浏览 1提问于2019-09-06得票数 0
2回答
我设计了一个关于背景色的窗口，该窗口具有以下属性：
$window.Backcolor = "White"
当我添加按钮时，默认情况下，从上面的窗口设置中，它们有一个白色的背景色，这就是我的问题。如何将按钮的背景色设置为默认的系统颜色？我希望它们看起来像默认的Windows样式。
下面是在将窗口的背景色设置为白色后，我希望按钮的背景色与更改窗口背景色后的实际外观之间的差异：
浏览 2提问于2015-09-09得票数 0
回答已采纳
1回答
我有一个测试，要求我登录，但我需要能够首先取消cookie提示。我有一个按钮的ID，它总是可见的，但柏树永远找不到它，为什么？
cy.visit('/signin')
cy.get('button[id="save"]').click() // Dismiss cookies prompt
下面是按钮HTML：
<button _ngcontent-kbm-c55="" mat-button="" id="save" class="mat-focus-indicator solo-
浏览 7提问于2022-07-05得票数 0
回答已采纳
在角度材料，你有可爱的涟漪效应，对许多组件。当你点击一个垫子列表项目时，连锁反应就会发生。
现在，有了按钮和许多其他组件，您可以使用button.ripple.launch(...)触发连锁反应，但是对于mat列表项，我看不到这样的功能。我希望能够这样做，以通知用户对列表所做的更改。
有人知道解决办法吗？我尝试过从MatListItem的_getHostElement()发送'click‘，但没有结果。
编辑
感谢所有帮助过的人！我想，最后我将只设计我自己的list组件，它允许我访问它的MatRipple指令。我已经对pr41的stackblitz进行了分叉，以使情况类似于我所拥有的(
浏览 5提问于2018-10-23得票数 4
我需要帮助创建一个量角器打字本代码，我如何点击这个按钮？它有_ngcontent和span按钮文本，有人知道怎么做吗？该网站的代码是：
<span _ngcontent-c6 class="braeting net-subheading-2"> ... </span>
<button _ngcontent-c6 class="tulbar-button net-button" net-button>
<span class="net-button-wrapper">
<
浏览 0提问于2018-11-28得票数 3
回答已采纳
1回答
我的JavaFx应用程序中有一个文本流小部件，需要更改背景色。
布局使用FXML构造，文本流的背景色需要使用外部css文件来设置。
我可以为textArea和textField设置背景色，但不能为textFlow设置背景色。
浏览 1提问于2017-03-31得票数 0
回答已采纳
当selenium webdriver在使用Angular 6开发的站点上运行时，selenium webdriver中的isEnabled()函数总是返回true。我找到的所有与此主题相关的答案都提到disabled不是一个属性，而是在按钮的类中编写。有关详细说明，请查看此链接。 Button enabled or disabled : How does webdriver decide? 但是我正在工作的网站的代码并没有在类中编写。这是我网站的代码。 <button _ngcontent-c61="" class="push-right-sm mat-r
浏览 58提问于2019-01-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
