离子动作 Sheet 破坏性文本

Question

我想用 Ionic 创建一个 ActionSheet => 简单，但我想像 Ionic 的文档中那样显示破坏性文本。这样破坏性的文本就不会附加到普通的按钮上。

这是我的 ActionSheet：

var hideSheet = $ionicActionSheet.show({
    buttons: [
       { text: 'Facebook' },
       { text: 'Twitter' },
       { text: 'Chat' },
       { text: 'copy URL'}
    ],
    destructiveText: 'Report',
    titleText: 'Share with your friends on...',
    cancelText: 'Cancel',
    cancel: function() {
          // add cancel code..
    },

这是教程页面上的图片：

下面是它在我的应用程序中的实际外观：

如何像Cancel-text一样显示破坏性文本？作为一个 "standalone-text"

Answer 1

嗯，好像 ionActionSheet 指令被改变了..！文档中的 gif 图片未更改..!

因此，在检查 ionic.bundle.js 中的 ionActionSheet 指令 之后。看起来他们已经更改了模板

template: '<div class="action-sheet-backdrop">' +
            '<div class="action-sheet-wrapper">' +
              '<div class="action-sheet" ng-class="{\'action-sheet-has-icons\': $actionSheetHasIcon}">' +
                '<div class="action-sheet-group action-sheet-options">' +
                  '<div class="action-sheet-title" ng-if="titleText" ng-bind-html="titleText"></div>' +
                  '<button class="button action-sheet-option" ng-click="buttonClicked($index)" ng-class="b.className" ng-repeat="b in buttons" ng-bind-html="b.text"></button>' +
                  '<button class="button destructive action-sheet-destructive" ng-if="destructiveText" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText"></button>' +
                '</div>' +
                '<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">' +
                  '<button class="button" ng-click="cancel()" ng-bind-html="cancelText"></button>' +
                '</div>' +
              '</div>' +
            '</div>' +
          '</div>'

如果我们看到，这里 titleText、button 和 destructiveText 放在相同的 action-sheet-group

下

其中 cancelText 与其他分开..

所以..就是这样..！希望这对您有帮助..！如果我得到更多，我会更新..！

离子动作 Sheet 破坏性文本

Ionic Action Sheet destructive Text

ionic-framework

ionic