将item-left-edit更改为item-right-edit

Question

抱歉，如果我的问题觉得奇怪，我是离子框架的初学者。

我在我的ion-list上放了一个show-delete="true"和一个ion-delete按钮。这工作得很好。

但现在我想把这个按钮放在右边。

当我查看生成的代码时，所有的类都是"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>

Answer 1

通过修改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>';

不管怎样，我想知道有没有更“合适”的方法...

Answer 2

还可以使用

$element.children().toggleClass('list-right-editing'，isShown)；

而不是

$element.children().toggleClass('list-left-editing'，

isShown);

Answer 3

我面临着完全相同的问题，我所做的是这样的……

我从.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); }

希望这能有所帮助:)