$mdDialog 确认重新排列 cancel-ok 到 ok-cancel

Posted 2023-03-06

【中文标题】$mdDialog 确认重新排列 cancel-ok 到 ok-cancel

【英文标题】：$mdDialog confirm rearrange cancel-ok to ok-cancel

【发布时间】：2016-05-30 18:33:51

【问题描述】：

在我们的网络应用程序中，我使用 Angular-Materials $mdDialog 和确认对象。是否可以将按钮的顺序从取消确定更改为确定取消？并将初始焦点设置为取消按钮？也许通过 CSS 或模板？

代码如下：

var confirm = this.$mdDialog.confirm()
  .parent(angular.element(document.body))
  .title('Löschen')
  .content('Möchten Sie wirklich löschen?')
  .ariaLabel('Löschen')
  .ok('Ja')
  .cancel('Nein')
  .targetEvent(event);

this.$mdDialog.show(confirm)
  .then(() => 
     // do something
  );

【问题讨论】：

如果您不使用自定义模板，我认为他们没有内置该功能。这是因为“不屑一顾的动作总是直接放在肯定动作的左边”。 google.com/design/spec/components/dialogs.html#dialogs-specs

好的，我认为你是对的。但也许我们可以找到一些解决方法。

在我看来，材料设计指南在这里是错误的。从我记事起，平权行动一直处于轻视行动的左侧。即使是 chrome 确认对话框也有这种方式。为什么要改变已经使用了 25 年以上的东西？

也想切换顺序？有这方面的消息吗？真正丑陋的解决方法是在ok()和cancel()的代码中切换逻辑

【参考方案1】：

这可能有效：

md-dialog md-dialog-actions 
    display: block;


md-dialog md-dialog-actions button 
    float: right;

【讨论】：

好主意，但它没有用（即使我把 !important 放在最后）。

这适用于example page，因此您的对话框必须具有不同的布局。您应该检查您的 html 结构（使用 chrome devtools）并将display: block; 应用于按钮容器，并将float: right; 应用于按钮。