Search code examples
javascriptangularjscarouselswipeonsen-ui

Onsen how to make partial swipe on item

i'm using AngularJS and Onsen framework for developing a mobile app. I added swipe to every item of a list. The code is like this

Here is the output:

enter image description here

I would like to have a partial swipe, not total. I mean something like this:

enter image description here

Do you know if i can do that with Onsen or any other workaround? In addition do you know how to enable swipe from the right, instead of the left?

Solution

  • Left Menu Solution:

    Technically there is an option to set the item size for the carousel, but maybe it's going to be easier just to make the carousel smaller and cheat with the size of the items. Demo 1

    ons-carousel {
  width: 25% !important;
  overflow: visible !important;
}
.list-action-item {
  width: 400% !important;
}

    It's ugly, but it's pretty much 2 lines of css without any thinking. :D

    Right Menu Solution

    To have the menu on the other side you can just remove the initial-index="1" and swap the item and menu places in the html. Afterwards again you can cheat it with some css depending on what you want to achieve. Demo 2

    In this demo I also had initially added transform: none to the first item, thinking that it looks better this way. Without that the items will swipe as normal. However if you do that then for smaller items you may not be able to see the item when you swipe, which is why I had originally disabled the movement.

    Right Menu Solution 2

    For the item-width attribute - as you can see it's an attribute for the carousel, but it's for all the items. The way carousel was made expects all items to be of the same size. You can set an item's width with css if you want, but the problem is that the carousel logic.

    If you want it to behave normally it what you can do is have a fixed width for the items with item-width, change the size of the first one with css and add dummy items right after it for the carousel logic.

    .list-action-item {
  width: 100% !important;
}

<ons-carousel swipeable item-width="25%" auto-scroll>
  <ons-carousel-item class="list-action-item">Fruit</ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-menu">Delete</ons-carousel-item>
</ons-carousel>

    The existence of dummies are there so that the auto-scroll locks into to proper places. Demo 3

    Notes

    And in case the thing which you want to do is just do a partial swipe but still have the same item size you can just remove the auto-scroll attribute and then it won't auto scroll to the whole item.

    Also if you think that some of the features which you want may appeal to a lot of users then feel free to say how you would like the API for them to be and it may be considered in the future.