Question

你可以告诉我如何制作相同尺寸（或相同高度）的按钮。实际上，我有四个按钮和一个切换按钮，我需要它们的高度应该与图像中所示相同。我需要降低高度切换按钮。我们可以像图像中所示那样制作相同的

这是我的代码

.margin_button_bar{
    margin-left: -0.5em!important;
  padding:0.5em!important;
}
.button_tab{
    position: relative;
}
.toggle_button{
    position: absolute!important; right: 0px!important;
    display: inline;
border: none;
    background: transparent;
  paddig:0.5em!important;
}

我们可以减少切换按钮的高度吗？

Answer 1

您可以通过修改.toggle .track {}类来更改切换轨道的高度（切换滑动的部分），然后您可以更改.toggle .handle {}中的句柄（移动的部分） class：或者在离子切换中你可以将toggle-small作为一个类应用，所以它看起来像<ion-toggle class="toggle-small">

查看此游戏场并使用css http://play.ionic.io/app/46f56cb9e30d

进行游戏

代码：

HTML：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
       <ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

      </ion-content>
    </ion-pane>
  </body>
</html>

CSS：

/* Styles here */
.toggle .track {
  height: 20px;
}

.toggle .handle {
  height: 20px;
}

JS：

angular.module('app', ['ionic']);

如何在离子中制作相同尺寸的按钮

1 个答案: