如何在离子框架中将背景颜色设置为$ 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);
    };

我想更改取消按钮有红色背景，我怎样才能在离子框架中实现它？

Answer 1

最简单的方法是使用浏览器查看标记（在终端中运行离子服务后），例如在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中或直接在样式表中更改这些值。