将 item-left-edit 更改为 item-right-edit 为 Ionic答案

【问题标题】：change item-left-edit into item-right-edit into Ionic将 item-left-edit 更改为 item-right-edit 为 Ionic
【发布时间】：2015-11-05 01:00:50
【问题描述】：

对不起，如果我的问题感到奇怪，我是 Ionic 框架的初学者。

我在我的 ion-list 和 ion-delete-button 上放了一个 show-delete="true"。这很好用。

但现在我希望这个按钮在右边。

当我查看生成的代码时，所有类都是"item-left-edit" 和"item-left-editable"。

我想生成"item-right-edit" 和"item-right-editable"。

我在文档中没有找到有关这些生成的类的任何信息...如果有人知道我应该如何进行？

编辑：这是一段代码：

 <ion-list show-delete="true" side="right">
                <ion-item ng-repeat="task in activeProject.tasks" class="item-right-editable">
                    {{task.title}} 

                       <ion-delete-button class="ion-android-cancel" ng-click="deleteTask($index)"></ion-delete-button>

                </ion-item>
            </ion-list>

【问题讨论】：

你能显示一些代码吗？也许为您的问题创造一个小提琴？

标签： javascript android css ionic-framework ionic

【解决方案1】：

我遇到了完全相同的问题，而我所做的是......

我从.item-right-edit 类中获取了样式，并且它的所有子类都添加了我想要反转.my-class .item-right-edit 之类的行为的前缀类，然后添加了一个缺失的样式，即left: 0; 到主.item-right-edit 类最后我将课程重命名为.item-left-edit。

这样做的缺点是我们将有一个名为 .item-left-edit 的类，它实际上的行为类似于 .item-right-edit 类，但添加特定的类前缀不会干扰应用程序的其他部分。

我将用于切换行为的 CSS 留在这里：

.my-class .item-left-edit {
  -webkit-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 75px;
  height: 100%;
  background: inherit;
  padding-left: 20px;
  left: auto;
  display: block;
  opacity: 0;
  -webkit-transform: translate3d(75px, 0, 0);
  transform: translate3d(75px, 0, 0); }
  .my-class .item-left-edit .button {
    min-width: 50px;
    height: 100%; }
    .my-class .item-left-edit .button.icon {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      position: absolute;
      top: 0;
      height: 100%;
      font-size: 32px; }
  .my-class .item-left-edit.visible {
    display: block; }
    .my-class .item-left-edit.visible.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }

希望这会有所帮助:)

【讨论】：

【解决方案2】：

也用

$element.children().toggleClass('list-right-editing', isShown);

而不是

$element.children().toggleClass('list-left-editing', isShown);

【讨论】：

【解决方案3】：

我终于通过像这样修改 ionic.bundle.js 文件找到了一些东西：

    var ITEM_TPL_DELETE_BUTTON =
  '<div class="item-right-edit item-delete enable-pointer-events">' +
  '</div>';

而不是

var ITEM_TPL_DELETE_BUTTON =
  '<div class="item-left-edit item-delete enable-pointer-events">' +
  '</div>';

无论如何，我想知道是否有更“正确”的方式来做到这一点......

【讨论】：

它还在另一边做一些填充。