css - 如何在 ionic 框架中将背景颜色设置为 $actionsheet

Question

这是代码，非常简单，从官方网站复制粘贴

$scope.show = function() {
        // Show the action sheet
        var hideSheet = $ionicActionSheet.show({
            destructiveText: 'Delete Photo',
            titleText: 'Modify your album',
            cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
            cancel: function() {
                // add cancel code..
            },
            buttonClicked: function(index) {
                return true;
            }
        });

        // For example's sake, hide the sheet after two seconds
        $timeout(function() {
        hideSheet();
        }, 2000);
    };

我想将取消按钮更改为红色背景，如何在 ionic 框架中实现它？

Answer 1

最简单的方法是使用浏览器查看标记(在终端中运行 ionic serve 之后)，例如在 Chrome 中按 ctrl+shift+i，您可以在其中选择按钮并查看附加了哪些类。在您的情况下，您会看到类似这样的内容:

<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
    <button class="button ng-binding" 
            ng-click="cancel()" 
            ng-bind-html="cancelText">Cancel</button>
</div>

它有父 div 的样式，子按钮是这样的:

.action-sheet-group {
  margin-bottom: 8px;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.action-sheet .button {
  display: block;
  padding: 1px;
  width: 100%;
  border-radius: 0;
  border-color: #d1d3d6;
  background-color: transparent;
  color: #007aff;
  font-size: 21px;
}

如果您不使用 Sass，只需在 Sass 中或直接在您的样式表中更改这些值。