Ionic-framework: saisie de texte/numéro à droite de l'élément v2 sur le formulaire

Créé le 18 févr. 2016  ·  3Commentaires  ·  Source: ionic-team/ionic-framework

Brève description du problème :

Demande de fonctionnalité : Possibilité d'aligner à droite une entrée (texte/nombre) sur un formulaire afin que s'il dispose également d'une bascule, le formulaire soit plus beau

Quel comportement attendez-vous ?

Aimerait un attribut - par exemple item-right , pour travailler sur l'entrée d'ions

Étapes à reproduire :

Avoir une bascule dans un formulaire - apparaît à droite avec une étiquette à gauche

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

MAIS si tu fais quelque chose comme ça

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

Ensuite, l'entrée apparaît juste à droite de l'étiquette.

Je voudrais que l'ajout de item-right pour déplacer l'entrée soit aligné à droite avec le bord droit

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

Version Ionique : 1.x / 2.x

2

Navigateur et système d'exploitation : iOS / Android / Chrome

Chrome (en développement)

Commentaire le plus utile

Donc, vous voulez que le texte d'entrée soit aligné à droite ? Peut-être avez-vous une photo de ce que vous cherchez ?

Vous pouvez utiliser l'attribut text-right sur ion-input pour aligner le texte correctement, mais il semble qu'il y ait des problèmes d'interface utilisateur avec le remplissage correct lors de cette opération :

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

Tous les 3 commentaires

Donc, vous voulez que le texte d'entrée soit aligné à droite ? Peut-être avez-vous une photo de ce que vous cherchez ?

Vous pouvez utiliser l'attribut text-right sur ion-input pour aligner le texte correctement, mais il semble qu'il y ait des problèmes d'interface utilisateur avec le remplissage correct lors de cette opération :

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

Ouais - c'est bien (et avec padding-right fait le rembourrage nécessaire). J'avais essayé toutes sortes mais pas ça :)

Un peu déroutant - les bascules vont à droite par défaut, d'autres composants ou du texte droit nécessitent un élément à droite et les entrées nécessitent un texte à droite et un remplissage

Probablement être agréable d'avoir tout cela d'une manière cohérente (ou d'une manière, et bascule comme un cas particulier)

Merci!

Ainsi, item-right est spécifiquement utilisé pour la projection de contenu. Je pense que faire en sorte que cet attribut aligne le texte serait déroutant car item-right est utilisé pour positionner des éléments en dehors du input-wrapper , mais cela ne fonctionnera pas sur un ion-input car il est placé à l'intérieur du input-wrapper .

Nous avons ajouté des documents sur la projection de contenu à l'élément : http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement

Je pense que la meilleure solution à cela est la documentation. L'alignement du texte doit être effectué à l'aide des attributs utilitaires : http://ionicframework.com/docs/v2/theming/css-utilities/

J'ai créé un problème pour ajouter de la documentation à ce sujet : https://github.com/driftyco/ionic-site/issues/661

Merci pour le problème !

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

vswarte picture vswarte  ·  3Commentaires

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Commentaires

brandyscarney picture brandyscarney  ·  3Commentaires

alan-agius4 picture alan-agius4  ·  3Commentaires

SebastianGiro picture SebastianGiro  ·  3Commentaires