Ionic-framework: v2 إدخال نص / رقم يمين العنصر في النموذج

تم إنشاؤها على ١٨ فبراير ٢٠١٦  ·  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>

ثم يظهر الإدخال على يمين الملصق.

أرغب في إضافة عنصر يمين لتحريك الإدخال يكون محاذيًا لليمين مع الحافة اليمنى

                    <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

نعم - هذا جيد (مع الحشو الأيمن يفعل الحشو اللازم). لقد جربت كل الأنواع ولكن ليس ذلك :)

مربك بعض الشيء - تنتقل التبديل إلى اليمين افتراضيًا ، وتتطلب المكونات الأخرى أو النص المستقيم عنصرًا يمينًا ، وتتطلب المدخلات نصًا يمينًا وحشوًا

ربما يكون من الجيد أن يكون لديك كل هذا بطريقة واحدة متسقة (أو طريقة واحدة ، والتبديل كحالة خاصة)

شكرا لك!

لذلك ، يتم استخدام 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 التقييمات