Ionic-framework: v2 элемент-правый ввод текста / числа в форме

Созданный на 18 февр. 2016  ·  3Комментарии  ·  Источник: ionic-team/ionic-framework

Краткое описание проблемы:

Запрос функции: возможность выровнять ввод (текст / число) по правому краю, чтобы форма выглядела лучше, если в ней также есть переключатель.

Какого поведения вы ожидаете?

Хотелось бы, чтобы атрибут - например, элемент-право, работал с ионным вводом

Действия по воспроизведению:

Есть переключатель в форме - отображается справа с меткой слева

 <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 (в разработке)

Самый полезный комментарий

Итак, вы хотите, чтобы вводимый текст был выровнен по правому краю? Может быть, у вас есть фотография того, что вы ищете?

Вы можете использовать атрибут text-right в ion-input чтобы выровнять текст по правому краю, но, похоже, при этом возникают некоторые проблемы пользовательского интерфейса с заполнением:

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

Все 3 Комментарий

Итак, вы хотите, чтобы вводимый текст был выровнен по правому краю? Может быть, у вас есть фотография того, что вы ищете?

Вы можете использовать атрибут text-right в ion-input чтобы выровнять текст по правому краю, но, похоже, при этом возникают некоторые проблемы пользовательского интерфейса с заполнением:

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

Да - это хорошо (и с помощью padding-right выполняется необходимое заполнение). Пробовал всякие но не то :)

Немного сбивает с толку - переключатели по умолчанию идут вправо, для других компонентов или обычного текста требуется элемент справа, а для ввода требуется текст справа и отступ.

Наверное, было бы неплохо иметь все это одним последовательным способом (или односторонним, и переключаться как особый случай)

Спасибо!

Итак, item-right специально используется для проецирования контента. Я думаю, что выравнивание текста с помощью этого атрибута будет сбивать с толку, поскольку item-right используется для позиционирования элементов за пределами input-wrapper , но это не сработает с ion-input потому что оно размещено внутри input-wrapper .

Мы добавили некоторые документы по проекции контента для элемента: http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement

Думаю, лучшее решение - документация. Выравнивание текста нужно производить с помощью атрибутов утилиты: http://ionicframework.com/docs/v2/theming/css-utilities/

Я создал проблему, чтобы добавить для этого документацию: https://github.com/driftyco/ionic-site/issues/661

Спасибо за вопрос!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги