移除底部抽屉的焦点和活动效果。

huangapple
go评论83阅读模式
英文:

Remove focus and active effects from Bottom Sheet

问题

I want to remove the effects that occur when you click on the button and after clicking by default. In other words, when it's :focus and :active.

  1. <button mat-raised-button click="openBottomSheet()" class="options-menu">
  2.   <mat-icon>more_vert</mat-icon>
  3. </button>

I have removed the default styles with the box-shadow, but I can't remove them in these two actions.

  1. .options-menu {
  2.   box-shadow: none;
  3. }

I also removed the box-shadow in these two actions, but the background still remains grey.

  1. .options-menu:focus:active {
  2.     background-color: transparent!important;
  3.     box-shadow: none!important;
  4. }

I also tried this, but the grey background continues:

  1. .options-menu .mat-mdc-button-persistent-ripple::before {
  2.   box-shadow: none!important;
  3.   background-color: transparent!important;
  4. }
英文:

I want to remove the effects that occurs when you click on the button and after clicking by default. In other words, when its :focus and :active.

  1. &lt;button mat-raised-button click=&quot;openBottomSheet()&quot; class=&quot;options-menu&quot;&gt;
  2.  &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
  3. &lt;/button&gt;

I have removed the default styles with the box-shadow but I can't remove in these two actions.

  1. .options-menu {
  2.   box-shadow: none;
  3. }

I remove the box-shadow also in this two actions, but the background still being grey.

  1. .options-menu:focus:active {
  2.     background-color: transparent!important;
  3.     box-shadow: none!important;
  4. }

I also try this why, but the grey background continous:

  1. .options-menu .mat-mdc-button-persistent-ripple::before {
  2.   box-shadow: none!important;
  3.   background-color: transparent!important;
  4. }

答案1

得分: 2

你可以在按钮上使用[disableRipple]="true"来移除点击效果。

  1. <button mat-raised-button click="openBottomSheet()" class="options-menu" [disableRipple]="true">
  2.   <mat-icon>more_vert</mat-icon>
  3. </button>

并且添加以下样式来移除点击阴影效果：

  1. :host ::ng-deep .mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  2.     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  4.     // 使用 'none' 来移除阴影
  5. }
英文:

you can use [disableRipple]=&quot;true&quot; on the button to remove the click effect

  1. &lt;button mat-raised-button click=&quot;openBottomSheet()&quot; class=&quot;options-menu&quot; [disableRipple]=&quot;true&quot;&gt;
  2.   &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
  3. &lt;/button&gt;

and add the below style to remove the click shadow effect:

  1. :host ::ng-deep .mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
  2.     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  4.     // box-shadow: none; to remove the shadow
  5. }

huangapple
  • 本文由 发表于 2023年6月9日 01:04:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76434192.html
  • angular
  • angular-material
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定