如何突出显示动作表中的活动选项？

Question

我创建了一个包含一些选项的操作表

当我选择一个选项时，我希望它突出显示。

我从这里拿了代码

https://ionicframework.com/docs/components/#action-sheets

有人可以帮助我吗

Answer 1

您可以使用某些（S）CSS使用类:active或:hover等伪类对其进行样式设置。要将自己的CSS类包含到操作表中，可以在创建时使用其cssClass属性。像这样：

let actionSheet = this.actionSheetCtrl.create({
  title: 'Ionic Action Sheet',
  cssClass: 'your-custom-class',
  buttons: [
    {
      text: 'Button 1',
      cssClass: 'custom-button-1-class',
      handler: () => {
        console.log("Button 1 picked!");
      }
    }
  ]
});

通过这样做，您可以使用自定义CSS类来设置操作表的每个按钮（选项）以及操作表本身的样式。如果你想，那么每当用户激活时，Button 1都会有黑色背景。它，你可以写：

.custom-button-1-class:active {
  background-color: black;
}