Question

我正在尝试重新创建类似于this的内容。我注意到输入字段不能在<ion-content class="padding">内，因为它们会得到一个难看的填充。另一方面，按钮需要这个衬垫，否则它会粘在一边而没有任何衬垫。

以下代码不起作用，因为它将按钮放在输入字段的顶部：

<ion-view view-title="Settings">
    <div ng-controller="ClickedCtrl">
        <ion-content>
            <div class="list">
                <label class="item item-input item-floating-label">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name" ng-mode="fname">
                </label>
            </div>
        </ion-content>
        <ion-content class="padding">
            <button class="button button-positive" ng-click="clicked()">
                Save
            </button>
        </ion-content>
    </div>
</ion-view>

更新：

这个布局是我想要的（注意输入字段没有填充，但按钮上有填充）：

这个布局是我使用<ion-content class="padding">时得到的（注意输入字段的填充）：

这个布局是我使用<ion-content>时得到的（注意按钮上没有填充）：

Answer 1

您应该像这样使用它：

<ion-content padding="true">

您可以在official Ionic example

中看到示例

Answer 2

我在这里创建了一个工作示例：http://play.ionic.io/app/1662da9d9b7d
为了达到理想的效果，将所有文本表单字段放在没有水平填充的元素中，以便表单到达屏幕边缘，然后将按钮放在带填充的嵌套div中，如下所示：

padding

见下面的输出。

我只应用了水平填充，因为我觉得垂直填充（默认情况下由iframe类[0]添加）导致了太多的空白区域。

[0] http://ionicframework.com/docs/components/#padding

Answer 3

根据文档，您需要使用全宽块按钮：

<button class="button button-full button-positive">
    Full Width Block Button
</button>

此外，您的内容指令不得具有填充属性。

希望它有所帮助。

Answer 4

您可以尝试从ion-padding删除填充，并在padding-top=""类内添加div。

<ion-view view-title="Settings">
    <div ng-controller="ClickedCtrl">
        <ion-content>
            <div class="list" padding-top="">
                <label class="item item-input item-floating-label">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name" ng-mode="fname">
                </label>
            </div>
        </ion-content>
        <ion-content class="padding">
            <button class="button button-positive" ng-click="clicked()">
                Save
            </button>
        </ion-content>
    </div>
</ion-view>

希望这会有所帮助。

离子含量：填充还是无填充？

4 个答案: