如何在Ionic框架中设计“两列按钮”

Question

我想要达到的目的是：

当然，我浏览了button文档，但似乎没有类似的东西。所以，我希望有人指出正确的方向（带有基本示例的codepen会非常棒）。

所以，理想情况下，这将是一个按钮标记，我可以传递两个变量（一个出现在左边，一个出现在右边）。这听起来像一个Angular指令的工作，虽然我还没有过多地调整它，所以在正确的方向上友好的推动将不胜感激。

Answer 1

他们的文档中有类似的内容 http://ionicframework.com/docs/components/#button-bar

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
</div>

Answer 2

我最终做的是：我创建了一个div，其中包含button类，然后在其中我创建了另外两个div的自定义类。

以下代码：

.leftButtonSide {
    width: 50%;
    float: left;
    color: #000;
}

.rightButtonSide {
    width: 50%;
    float: left;
    background: #F2F2F2;
    color: #000;
    border-radius: 2px;
}

<div ng-repeat="d in data" class="button button-positive-outline">
    <div class="leftButtonSide">2</div>
    <div class="rightButtonSide">2,00</div>
</div>

是的，对于完全相同的外观，你必须使用CSS。最后我最终得到了这个：

希望这对某人也有帮助！