CODEWITHSUNDEEP
javascriptjqueryangularjsionic-framework
user944513
user944513

Reputation: 12729

how to make tab on top in ionic framework + angular?

could you please tell me how to make tab on top in ionic framework + angular.?I am able to make in jquery mobile https://jsfiddle.net/j14u1kLx/ I need to try same on ionic framework

http://ionicframework.com/docs/api/directive/ionTabs/ but these tab come on fotter I need to add tab on header I did in fiddle .could you please tel me how I will do in ionic same task .I am able to do using jquery mobile.

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

Thanks

Upvotes: 2

Views: 2881

Answers (1)

Reena
Reena

Reputation: 1119

Refer to this link:

http://ionicframework.com/docs/components/#striped-style-tabs.

In order to make the header appears in top, there is a you could either remove the css style "position: abolute" of this class from the css file otherwise make it "position: inherit". This will solve the purpose.

Upvotes: 3

Related Questions