2015-08-12 6 views
5

Извините, если мой вопрос кажется странным, я новичок в Ionic framework.change item-left-edit to item-right-edit to Ionic

Я положил номер show-delete="true" на свой ионный список и кнопку удаления ионов. Это отлично работает.

Но теперь я хочу, чтобы эта кнопка была справа.

Когда я взгляну на сгенерированный код, все классы - "item-left-edit" и "item-left-editable".

Я хотел бы сгенерировать "item-right-edit" и "item-right-editable".

Я не нахожу информацию о темах, сгенерированных в документах ... Если у кого-нибудь есть идея, как мне следует продолжить?

Edit: вот кусок кода:

<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> 
+0

Могут ли вы показать код? может создать скрипку для вашей проблемы? –

ответ

0

я, наконец, нашел что-то по 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>'; 

Во всяком случае, мне было интересно, есть ли там более «правильный» способ сделать это ...

+0

он все еще делает некоторые дополнения на другой стороне. –

0

также использовать

$ element.children() toggleClass ('список правых редактирования', isShown).

вместо

$ element.children() toggleClass ('список левого редактирования', isShown).

0

я столкнулся с точно таким же вопросом, и что я сделал это ...

Я захватил стили из .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); } 

Надеется, что это помогает :)