如何禁用 Ionic 3 的离子卡？

Question

我想使用官方文档中列出的 disabled 属性禁用 ion-card。我尝试使用它但没有任何反应，我仍然可以与卡片互动。

我也试过使用 [禁用] 仍然没有禁用卡。

实现这一目标的正确方法是什么？

代码：

<ion-card (click)="openControllerPage('ERD')" disabled='true'>
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 1

page.html

    <ion-card disabled="true">
    <p>Text</p>
    </ion-card>

//不禁用

https://prnt.sc/p9olvz

//禁用

https://prnt.sc/p9om69

查看您的代码with/without禁用属性

Answer 2

试试这个，

<ion-card (click)="openControllerPage('ERD')" [disabled]="true">
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 3

根据您的相关标签，您使用的是 ionic 3，那么您也在查看错误的文档。你应该看看 version 3 documentation

ionic 3 上的卡禁用功能不存在，但在 ionic 4 中引入。因此您需要以某种方式解决这个问题，这可以像答案 here. Demo for that: STACKBLITZ[=23 中那样以编程方式完成=]

也就是说，如果您想有条件地禁用卡，您可以为此使用一个布尔标志：

(click)="isDisabled ? $event.stopPropagation() : openControllerPage('ERD'); isDisabled ? false : null" [class.isDisabled]="isDisabled"

否则，如果应始终禁用单击事件，则只需将其从卡片中完全删除即可。

...但是无论您选择什么路径，您还可能需要在禁用时设置卡片样式，以便用户可以看到该卡片实际上已禁用。

Answer 4

根据文档，disabled="true" 应该可以解决问题，但作为解决方法，您可以使用 user-select: none;

.html

<ion-card disabled="true">
  ...
</ion-card>

.sccs

ion-card[disabled="true"] {
  user-select: none;
}

如何禁用 Ionic 3 的离子卡？

How to disable ion-card for Ionic 3?

typescript

ionic-framework

ionic3

angular

page.html