I want to combine tabbar and carousel to create a menu.

I am currently trying various things using the sample program.
I want to make a menu by combining tabbar and carousel.
It looks like the latest line or cacao, but
Is it possible?
I've been researching a lot, but it's hard to find...
Sorry for the inconvenience, but I appreciate your cooperation.

onsen-ui

2022-09-30 19:32

1 Answers

I'm sorry that I didn't get the image of the UI I intended, but
Do you mean you want to switch between multiple pages in the tab?

If so,
Using the Tab Bar
Using Carousels
I think I can use the combination of

sample

ons.bootstrap();

ons-carousel-item{
  display:table;
  text-align:center;
}
US>.item-label{
  display:table-cell;
  vertical-align:middle;
  color:white;
  line-height:1;
  font-size: 48px;
  font-weight:bold;
}
US>.cover-label{
  text-align:center;
  position:absolute;
  left:0px;
  width: 100%;
  bottom —10px;
  color:white;
}

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css"rel="stylesheet"/>

<ons-tabbar>
  	<ons-tab page="home.html" label="Home" icon="ion-home" active="true">/ons-tab>
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working">/ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag">/ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog">/ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <ons-page>
    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
      <ons-carousel-item style="background-color:gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color:#085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color:#373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color:#D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
      <ons-carousel-cover><div class="cover-label">Swipe left or right</div>/ons-carousel-cover>
    </ons-carousel>
  </ons-page>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center"> Feed</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Page Contents</p>
</ons-template>

----------

I apologize for the late reply.
If you want to swipe and switch tabs, it would be better to use ons-gesture-detector
However, it seems a little difficult if you want to make a cool animation even during the switchover.

ons.bootstrap()
.controller('SwipeCtrl', function($scope){
  // Set the speed of the swipe to detect (slower to reduce)
  mm.gestures.Swipe.defaults.swipeVelocityX=0.01;
  $scope.swipe=function(direction){
    varindex=tab.getActiveTabIndex()
    if(direction==='left'){
      if(index===3)return;
      index+=1;
    } else if(direction==='right'){
      if(index===0)return;
      index-=1;
    }
    tab.setActiveTab(index);
  }
})

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<bodying-controller="SwipeCtrl">
  <ons-gesture-detectorng-swipeleft="swipe('left')"ng-swiperight="swipe('right')">
  <ons-tabbar var="tab">
      <ons-tab page="home.html" label="Home" icon="ion-home" active="true">/ons-tab>
    <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working">/ons-tab>
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag">/ons-tab>
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog">/ons-tab>
  </ons-tabbar>
  </ons-gesture-detector>
</body>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top:100px;color:#999;text-align:center">Home Page Contents</p>
  </ons-page>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Comment Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Tags Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Settings Page Contents</p>
</ons-template>

2022-09-30 19:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656