Ionic-framework: 表单上的 v2 item-right 文本/数字输入

创建于 2016-02-18  ·  3评论  ·  资料来源: ionic-team/ionic-framework

问题的简短描述:

功能请求:能够在表单上右对齐输入(文本/数字),这样如果它也有切换,表单看起来会更好

你期待什么行为?

想要一个属性 - 例如 item-right ,用于离子输入

重现步骤:

在表单中有一个切换 - 出现在右侧,左侧有标签

 <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label secondary>Published</ion-label>
                                <ion-toggle [(ngModel)]="published" toggle></ion-toggle>
                            </ion-item>
                        </ion-col>
</ion-row>

但是如果你做这样的事情

                    <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label>City</ion-label>
                                <ion-input [(ngModel)]="city" ngControl="city"
                                           maxlength="10"
                                           type="text"></ion-input>
                            </ion-item>
                        </ion-col>
                    </ion-row>

然后输入出现在标签的右侧。

我希望添加 item-right 以将输入与右手边缘右对齐

                    <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label secondary>City</ion-label>
                                <ion-input item-right [(ngModel)]="city" ngControl="city"
                                           maxlength="10"
                                           type="text"></ion-input>
                            </ion-item>
                        </ion-col>
                    </ion-row>

离子版本:1.x / 2.x

2

浏览器和操作系统:iOS / Android / Chrome

Chrome(开发中)

最有用的评论

那么您希望输入文本向右对齐吗? 也许你有一张你要找的东西的照片?

您可以使用ion-input上的text-right属性来正确对齐文本,但是在执行此操作时似乎存在一些 UI 填充问题:

screen shot 2016-02-18 at 5 43 48 pm

所有3条评论

那么您希望输入文本向右对齐吗? 也许你有一张你要找的东西的照片?

您可以使用ion-input上的text-right属性来正确对齐文本,但是在执行此操作时似乎存在一些 UI 填充问题:

screen shot 2016-02-18 at 5 43 48 pm

是的 - 这很好(并且使用 padding-right 进行必要的填充)。 尝试过各种方法,但没有尝试过:)

有点混乱 - 默认情况下切换到右侧,其他组件或直接文本需要 item-right,并且输入需要 text-right 和 padding

以一种一致的方式(或一种方式,并作为特殊情况切换)可能会很好

谢谢!

因此, item-right专门用于内容投影。 我认为使这个属性对齐文本会令人困惑,因为item-right用于定位input-wrapper之外的元素,但这不适用于ion-input因为它被放置在input-wrapper

我们在项目中添加了一些关于内容投影的文档: http ://ionicframework.com/docs/v2/api/components/item/Item/#item -placement

我认为最好的解决方案是文档。 应使用实用程序属性对齐文本: http :

我创建了一个问题来为此添加文档: https :

感谢您的问题!

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

masimplo picture masimplo  ·  3评论

alexbainbridge picture alexbainbridge  ·  3评论

vswarte picture vswarte  ·  3评论

SebastianGiro picture SebastianGiro  ·  3评论

brandyscarney picture brandyscarney  ·  3评论