Ionic-framework: v2アイテム-フォームへの右のテキスト/数値入力

作成日 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>

次に、入力がラベルのすぐ右側に表示されます。

アイテムを追加したい-入力を右端に揃えて移動する権利

                    <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-inputtext-right属性を使用してテキストを正しく配置できますが、これを行う場合、パディングの権利にUIの問題があるようです。

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

全てのコメント3件

では、入力テキストを右揃えにしますか? 多分あなたはあなたが探しているものの写真を持っていますか?

ion-inputtext-right属性を使用してテキストを正しく配置できますが、これを行う場合、パディングの権利にUIの問題があるようです。

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

ええ-それは良いことです(そしてパディングを使用すると-必要なパディングが正しく行われます)。 あらゆる種類を試しましたが、そうではありませんでした:)

少し紛らわしい-トグルはデフォルトで右に移動し、他のコンポーネントまたはストレートテキストはアイテム右を必要とし、入力はテキスト右とパディングを必要とします

おそらく、これをすべて1つの一貫した方法(または1つの方法で、特別な場合として切り替える)があると便利です。

ありがとう!

したがって、 item-rightは特にコンテンツの投影に使用されます。 item-rightinput-wrapper外側に要素を配置するために使用されるため、この属性をテキストに揃えるのは混乱を招くと思いますが、 ion-inputは配置されているため、これは機能しません。 input-wrapper内部。

コンテンツプロジェクションに関するいくつかのドキュメントをアイテムに追加しました: http: //ionicframework.com/docs/v2/api/components/item/Item/#item -placement

これに対する最善の解決策はドキュメントだと思います。 テキストの位置合わせは、ユーティリティ属性を使用して行う必要があります: http

このためのドキュメントを追加するための問題を作成しました: https

問題をありがとう!

このページは役に立ちましたか?
0 / 5 - 0 評価