Question

很抱歉，如果我的问题很奇怪，我是Ionic框架的初学者。

我在我的离子列表和离子删除按钮上放了一个show-delete="true"。这很有效。

但现在我希望这个按钮位于右侧。

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

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

我在docs中找不到关于这些生成的类的任何信息......如果有人知道我该怎么办？

编辑：这是一段代码：

 <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

我终于通过modifiyng找到了像这样的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); }

希望这会有所帮助：）

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

3 个答案: