Ionic-framework: v2 entrada de texto / número a la derecha del elemento en el formulario

Creado en 18 feb. 2016  ·  3Comentarios  ·  Fuente: ionic-team/ionic-framework

Breve descripción del problema:

Solicitud de función: capacidad para alinear a la derecha una entrada (texto / número) en un formulario para que, si también tiene un interruptor, el formulario se vea mejor

¿Qué comportamiento esperas?

Me gustaría que un atributo, por ejemplo, artículo-derecho, funcione en la entrada de iones

Pasos para reproducir:

Tener un interruptor en un formulario: aparece a la derecha con una etiqueta a la izquierda

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

PERO si haces algo como esto

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

Luego, la entrada aparece justo a la derecha de la etiqueta.

Me gustaría que la adición de item-right para mover la entrada esté alineada a la derecha con el borde derecho

                    <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ón iónica : 1.x / 2.x

2

Navegador y sistema operativo : iOS / Android / Chrome

Chrome (en desarrollo)

Comentario más útil

¿Quiere que el texto de entrada esté alineado a la derecha? ¿Quizás tienes una imagen de lo que estás buscando?

Puede usar el atributo text-right en ion-input para alinear el texto correctamente, pero parece que hay algunos problemas de IU con el relleno correcto al hacer esto:

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

Todos 3 comentarios

¿Quiere que el texto de entrada esté alineado a la derecha? ¿Quizás tienes una imagen de lo que estás buscando?

Puede usar el atributo text-right en ion-input para alinear el texto correctamente, pero parece que hay algunos problemas de IU con el relleno correcto al hacer esto:

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

Sí, eso es bueno (y con padding-right hace el acolchado necesario). Lo había intentado todo, pero no eso :)

Un poco confuso: los conmutadores van a la derecha de forma predeterminada, otros componentes o el texto directo requieren el elemento derecho, y las entradas requieren texto derecho y relleno

Probablemente sea bueno tener todo esto de una manera consistente (o de una manera, y alterna como un caso especial)

¡Gracias!

Entonces, item-right se usa específicamente para la proyección de contenido. Creo que hacer que este atributo alinee el texto sería confuso ya que item-right se usa para colocar elementos fuera de input-wrapper , pero esto no funcionará en un ion-input porque está colocado dentro de input-wrapper .

Agregamos algunos documentos sobre proyección de contenido al elemento: http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement

Creo que la mejor solución para esto es la documentación. La alineación del texto debe realizarse utilizando los atributos de la utilidad: http://ionicframework.com/docs/v2/theming/css-utilities/

Creé un problema para agregar documentación para esto: https://github.com/driftyco/ionic-site/issues/661

¡Gracias por el problema!

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

masimplo picture masimplo  ·  3Comentarios

alexbainbridge picture alexbainbridge  ·  3Comentarios

danbucholtz picture danbucholtz  ·  3Comentarios

giammaleoni picture giammaleoni  ·  3Comentarios

Nick-The-Uncharted picture Nick-The-Uncharted  ·  3Comentarios