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
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)
¿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:
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!
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
enion-input
para alinear el texto correctamente, pero parece que hay algunos problemas de IU con el relleno correcto al hacer esto: