CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveionic-framework
Shruti
Shruti

Reputation: 1574

how to implement toolbar in ionic?

I am trying to implement toolbar in ionic which should look like same as this given in bootstrap . http://jsfiddle.net/wmDL8/17/

I need to implement toolbar in ionic same as above in fiddle which is implemented in bootstrap.I tried it but my button are taking whole width I need equal space take from left and right .And user should able to add active class so that it know which button is selected and which is not can we implement toolbar in ionic

here is my code http://codepen.io/anon/pen/pJRJLj

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button">Command1</a>
  <a class="button">Command2</a>
  <a class="button">Command3</a>
</div></ion-content>

</body>

</html>

Upvotes: 1

Views: 1862

Answers (2)

Richard Kho
Richard Kho

Reputation: 5286

You can change your CSS padding-left and padding-right for your button-bar div:

http://codepen.io/anon/pen/vOgOvV

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
  <a class="button">fourth</a>
</div></ion-content>

</body>

</html>

CSS:

.button-bar {
  padding-left:10%;
  padding-right:10%;
}

Image:

enter image description here

You can change the percentage to whatever you need it to eventually be.

Upvotes: 2

aorfevre
aorfevre

Reputation: 5064

add a padding to your button-bar class with the desired value :

.button-bar {
  padding-left:10%;
  padding-right:10%;
}

Upvotes: 0

Related Questions