CODEWITHSUNDEEP
onsen-ui
deovince
deovince

Reputation: 41

How to use lazy repeat to display more than one item per line?

Instead of displying the items one above one as in the basis example
Item#1
Item#2
Item#3

what can i arrange items in two or three columns per row as below ?
Item#1 Item#2 Item#3
Item#4 Item#5 Item#6
Item#7 Item#8 Item#9

Upvotes: 4

Views: 449

Answers (1)

Andi Pavllo
Andi Pavllo

Reputation: 2506

You can do it by puttin ons-list inside ons-carousel, here is an example:

<ons-page>
  <ons-carousel swipeable overscrollable auto-scroll style="height: 100%; width: 100%;">
    <ons-carousel-item ng-repeat="i in [0,1]">
      <ons-list>  
        <ons-list-item ng-repeat="j in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]">
          Item #{{ j + i * 21 }}
        </ons-list-item>
      </ons-list>
    </ons-carousel-item>
  </ons-carousel-item>
</ons-page>

Upvotes: 1

Related Questions