각진 재료 - 비활성화된 버튼에 툴팁을 추가하는 방법

각진 재료 - 비활성화된 버튼에 툴팁을 추가하는 방법

저는 그 지시가matTooltip비활성화된 버튼에서는 작동하지 않습니다.어떻게 하면 달성할 수 있을까요?

예:

<button mat-raised-button [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

활성화된 버튼의 경우 완벽하게 작동합니다.

<button mat-raised-button [disabled]="false" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

이는 에 의해 트리거되므로 작동하지 않습니다.mouseenter비활성화된 요소에 대해 대부분의 브라우저에서 실행되지 않는 이벤트입니다.해결 방법은 다음을 추가하는 것입니다.matTooltip부모 요소에:

<div matTooltip="You cannot delete that" [matTooltipDisabled]="!isButtonDisabled()">
    <button mat-raised-button [disabled]="isButtonDisabled()">
        <mat-icon>delete</mat-icon>
    </button>
</div>

위의 예에서는 버튼을 활성화해야 하는지 여부를 결정하는 방법이 있다고 가정합니다.사용함으로써matTooltipDisabled버튼이 비활성화된 경우에만 툴팁이 표시됩니다.

참조:

• https://github.com/angular/material2/issues/5040
• https://github.com/angular/material2/issues/7953

비활성화된 아이콘 버튼에 툴팁을 표시하는 과정에서 비슷한 문제가 발생했습니다.버튼 위에 디브를 추가로 추가하면 툴바의 다른 버튼에 비해 버튼의 레이아웃이 엉망이 되었기 때문에 주어진 해결책은 제게 실용적이지 않았습니다.

저에게 더 간단한 해결책은 버튼 안에 있는 아이콘 안에 툴팁을 추가하는 것이었습니다.이와 같은 것:

<button mat-raised-button [disabled]="true">
    <mat-icon matTooltip="You cannot delete that">delete</mat-icon>
</button>

아이콘이 비활성화되어 있지 않으므로 작동합니다.

네, 가장 간단한 솔루션은 위와 같습니다.하지만 제 경우에는 좀 더 유연성이 필요했습니다.

   <button  [disabled]="form.invalid">
      <span [matTooltip]="form.invalid ? 'some text' : ''">button text</span>
    </button>

다른 사용자가 제안한 대로 단추의 매트 아이콘 안에 도구 설명을 추가하면 단추가 아닌 아이콘을 마우스로 누를 때만 작동합니다.대신 CSS 수업 없이 다른 디브에 단추를 감아도 되고 툴팁만 있으면 됩니다.

또한 matTooltipDisabled 속성을 추가하여 툴팁이 비활성화되지 않도록 할 수도 있습니다.

<div matTooltip="You cannot delete that" [matTooltipDisabled]="false">
  <button mat-raised-button [disabled]="true">
     <mat-icon>delete</mat-icon>
  </button>
</div>

시도해 보기:

<div [matTooltip]="isDisabled ? 'You cannot delete that' : ''">
    <button mat-raised-button [disabled]="isDisabled">
      <mat-icon>delete</mat-icon>
    </button>
    <div>

필요한 경우 표시할 제목 속성을 사용할 수 있습니다.

<button mat-raised-button [disabled]="true" title = "Some text">
  <mat-icon>delete</mat-icon>
</button>

당신은 ternary operator들과 속성 바인딩을 할 수 있습니다.

해결책을 찾았습니다!

다음과 같이 도구 설명을 버튼 내용에 넣습니다.

<button type="submit" [disabled]="disableEdit()" class="btn btn-primary btn-sm"
        [routerLink]="['/entity', entity.id, 'edit']">
    <div matTooltip="{{ 'entity.placeholders.cantEdit' | translate }}"
         [matTooltipDisabled]="disableEdit()">
        <fa-icon [icon]="'pencil-alt'"></fa-icon>
        <span class="d-none d-md-inline">{{ 'entity.action.edit' | translate }}</span>
    </div>
</button>

이것이 추하다는 것을 알고 있지만 당신도 이렇게 합니다. 여러 개의 버튼을 사용합니다.ngIf

<!-- No click action -->
<button *ngIf="disable" mat-raised-button matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

<button *ngIf="!disable" mat-raised-button (click)="delete()">
  <mat-icon>delete</mat-icon>
</button>

이렇게 버튼에 '포인트 이벤트: 모두' 스타일을 추가하면 됩니다.

<button mat-raised-button style="pointer-events: all" [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

각진 및 각진 소재

할 을 추가할 수 .matTooltip에, 버튼의 식에의우로장질로장우o에,,entey식 .span튼를고나나e고를ge튼trne을mat-icon소재 아이콘과 함께.

때 을 으로 된 은 을 할 을 은 된 을 pointer-events: none적용. 버튼에 대해서는 글로벌 소재 스타일 참조:

아이콘 단추:

.mdc-icon-button:disabled,
.mat-mdc-icon-button[disabled] {
  pointer-events: none;
}

일반 버튼:

.mdc-button[disabled],
.mat-mdc-button[disabled] {
  pointer-events: none;
}

버튼을 호버링할 때 툴팁이 표시되도록 하려면 하위 요소에 대해 이를 취소해야 합니다.이는 다음과 같이 쉽게 해결할 수 있습니다.

<button #myIconButton mat-icon-button [disabled]="!isAllowedDelete">
  <mat-icon [style.pointer-events]="'all'"
            matTooltip="You are not allowed to delete this item"
            [matTooltipDisabled]="!myIconButton.disabled">delete</mat-icon>
</button>

<button #myButton mat-button [disabled]="!isAllowedDelete">
  <span [style.pointer-events]="'all'"
        matTooltip="You are not allowed to delete this item"
        [matTooltipDisabled]="!myButton.disabled">delete</span>
</button>

또는 스타일시트에 원하는 경우:

button[disabled] span.mat-mdc-tooltip-trigger
button[disabled] mat-icon.mat-mdc-tooltip-trigger {
  /* Allows for tooltips to be triggered on disabled buttons */
  pointer-events: all;
}

버튼을 요소로 래핑하는 것보다 이것이 더 낫다고 생각합니다. 이제 "disabled" 상태의 버튼을 사용하여 도구 설명을 직접 비활성화/활성화할 수 있습니다.myButton.disabled) 및 DOM에 추가적인 포장지나 요소를 추가할 필요가 없습니다.

이 Stackblitz에서 작동 예제를 확인합니다.

만 아니라matTooltip,심지어.title비활성화된 버튼에서는 속성이 작동하지 않습니다.

버튼 자체가 아니라 디브가 포함된 디브에 툴팁만 추가하면 됩니다.

<div title="Some tooltip message">
  <button type="button" [disabled]="!enable()">My Button</button> 
</div>

언급URL : https://stackoverflow.com/questions/48277909/angular-material-how-to-add-a-tooltip-to-a-disabled-button