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

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; 
}