Ionic-framework: v2 item-kanan input teks/angka pada formulir

Dibuat pada 18 Feb 2016  ·  3Komentar  ·  Sumber: ionic-team/ionic-framework

Deskripsi singkat masalah:

Permintaan fitur : Kemampuan untuk menyelaraskan input (teks / angka) pada formulir sehingga jika juga memiliki sakelar, formulir terlihat lebih baik

Perilaku apa yang Anda harapkan?

Ingin atribut - misalnya item-right , untuk bekerja pada ion-input

Langkah-langkah untuk mereproduksi:

Memiliki sakelar dalam formulir - muncul di sebelah kanan dengan label di sebelah kiri

 <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>

TAPI jika Anda melakukan sesuatu seperti ini

                    <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>

Kemudian input muncul tepat di sebelah kanan label.

Saya ingin penambahan item-kanan untuk memindahkan input sejajar dengan tepi kanan

                    <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>

Versi Ionik : 1.x / 2.x

2

Peramban & Sistem Operasi : iOS / Android / Chrome

Chrome (dalam pengembangan)

Komentar yang paling membantu

Jadi Anda ingin teks input disejajarkan ke kanan? Mungkin Anda memiliki gambaran tentang apa yang Anda cari?

Anda dapat menggunakan atribut text-right pada ion-input untuk menyelaraskan teks dengan benar, tetapi tampaknya ada beberapa masalah UI dengan padding yang tepat saat melakukan ini:

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

Semua 3 komentar

Jadi Anda ingin teks input disejajarkan ke kanan? Mungkin Anda memiliki gambaran tentang apa yang Anda cari?

Anda dapat menggunakan atribut text-right pada ion-input untuk menyelaraskan teks dengan benar, tetapi tampaknya ada beberapa masalah UI dengan padding yang tepat saat melakukan ini:

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

Ya - itu bagus (dan dengan padding-right melakukan padding yang diperlukan). Sudah mencoba segala macam tapi bukan itu :)

Agak membingungkan - matikan ke kanan secara default, komponen lain atau teks lurus memerlukan item-kanan, dan input memerlukan teks-kanan dan padding

Mungkin bagus untuk memiliki semua ini satu cara yang konsisten (atau satu cara, dan matikan sebagai kasus khusus)

Terima kasih!

Jadi, item-right khusus digunakan untuk proyeksi konten. Saya pikir membuat atribut ini menyelaraskan teks akan membingungkan karena item-right digunakan untuk memposisikan elemen di luar input-wrapper , tetapi ini tidak akan berfungsi pada ion-input karena ditempatkan di dalam input-wrapper .

Kami menambahkan beberapa dokumen tentang proyeksi konten ke item: http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement

Saya pikir solusi terbaik untuk ini adalah dokumentasi. Menyelaraskan teks harus dilakukan menggunakan atribut utilitas: http://ionicframework.com/docs/v2/theming/css-utilities/

Saya membuat masalah untuk menambahkan dokumentasi untuk ini: https://github.com/driftyco/ionic-site/issues/661

Terima kasih untuk masalah ini!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat