如何在离子中实现工具栏？答案

【问题标题】：how to implement toolbar in ionic?如何在离子中实现工具栏？
【发布时间】：2015-08-11 07:49:21
【问题描述】：

我正在尝试在 ionic 中实现工具栏，它看起来应该与 bootstrap 中给出的相同。 http://jsfiddle.net/wmDL8/17/

我需要在 ionic 中实现工具栏，与上面在 bootstrap 中实现的小提琴相同。我试过了，但我的按钮占用了整个宽度它知道哪个按钮被选中，哪个按钮未被选中我们可以在离子中实现工具栏

这是我的代码 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>

【问题讨论】：

标签： javascript angularjs angularjs-directive ionic-framework ionic

【解决方案1】：

您可以将 CSS padding-left 和 padding-right 更改为 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%;
}

图片：

您可以将百分比更改为您最终需要的任何值。

【讨论】：

感谢很好的回答codepen.io/anon/pen/pJRJLj.But 用户如何知道哪个按钮处于活动状态意味着我需要在按钮单击时添加活动类。当用户单击任何按钮时，它会变为绿色，其他变为禁用

【解决方案2】：

为您的按钮栏类添加一个具有所需值的填充：

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

【讨论】：

@aorfervre 感谢出色的回答codepen.io/anon/pen/pJRJLj.But 用户如何知道哪个按钮处于活动状态意味着我需要在按钮单击时添加活动类。当用户单击任何按钮时，它变为绿色，其他变为禁用