如何在离子中添加切换按钮答案

【问题标题】：how to add toggle button in ionic如何在离子中添加切换按钮
【发布时间】：2015-09-28 01:42:17
【问题描述】：

我正在尝试添加带有按钮栏（右侧）的切换按钮，如图所示！[在此处输入图像描述][1]

我可以制作按钮栏，并从此链接添加了切换按钮 http://ionicframework.com/docs/api/directive/ionToggle/

但我的切换按钮位于按钮栏下方。我需要它应该与按钮栏一起出现，如图所示这是我的代码

  <div class="" id="buttonTab" style="border-bottom: 1px solid lightgray">


  <div class="button-bar">

            </div>
            <div>
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Show Attachment</ion-toggle>            </div>

        </div>
        </div>

【问题讨论】：

您的问题是关于CSS，而不是Angular，因此请相应地更新您的标题和标签。

标签： angularjs css angularjs-directive angularjs-scope ionic-framework

【解决方案1】：

最简单的解决方案可能是将按钮（ion-toggle 元素）放在.button-bar 内并使其向右浮动。

在这里查看它的实际效果，position: absolute; 和 right: 0;：

http://plnkr.co/edit/YvSwWgNzEioW0Lpvm04i?p=preview

【讨论】：

我们可以减小按钮栏按钮的宽度吗？
有一个工作的 plunker - 由于栏的正确填充，浮动没有工作，所以需要调整。当然，您可以减小宽度，只需确保将其设置为 inline-block 即可。
解决方案中存在问题 ..toggle 按钮与 bar 按钮相连 ..它看起来不像我想要的那样 ..请检查图像它与 bar 有一些像素
使用边距来定位它。
看到这个plnkr.co/edit/3RQsUusKuGe3ABXleOVM?p=preview ..please check in full screen of plunker .my last button of button bar border not display and it is not using margin

【解决方案2】：

检查这个。 http://plnkr.co/edit/MuMTo8cmNaV2p6W7mFMt?p=preview

您的按钮栏有 width:100% 和 padding 。我将宽度设置为 75% 并删除了填充并将其浮动到左侧并将 div 切换到右侧

.button-bar {
   /* padding: 1% 18% 1% 18%;*/
    float:left;
    width:75% !important;
}

【讨论】：

Ionic 框架是为构建移动应用而设计的。我不认为移动屏幕有空间显示四个按钮和一个向右浮动的切换按钮。考虑改变你的设计
我正在开发平板电脑。它有足够的空间..:)