Solicitação de recurso: capacidade de alinhar à direita uma entrada (texto / número) em um formulário para que, se também tiver um botão de alternância, o formulário tenha uma aparência melhor
Gostaria de um atributo - por exemplo, item-right, para trabalhar na entrada de íons
Passos para reproduzir:
Tem um botão de alternância em um formulário - aparece à direita com um rótulo à esquerda
<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>
MAS se você fizer algo assim
<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>
Em seguida, a entrada aparece à direita do rótulo.
Eu gostaria que a adição de item-right para mover a entrada seja alinhada à direita com a borda direita
<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>
Versão Iônica : 1.x / 2.x
2
Navegador e sistema operacional : iOS / Android / Chrome
Chrome (em desenvolvimento)
Então você deseja que o texto de entrada seja alinhado à direita? Talvez você tenha uma foto do que está procurando?
Você pode usar o atributo text-right
em ion-input
para alinhar o texto corretamente, mas parece que há alguns problemas de IU com o preenchimento correto ao fazer isso:
Sim - isso é bom (e com padding-right faz o preenchimento necessário). Tinha tentado todos os tipos, mas não isso :)
Um pouco confuso - os botões de alternância vão para a direita por padrão, outros componentes ou texto simples exigem a direita do item e as entradas exigem a direita do texto e preenchimento
Provavelmente seria bom ter tudo isso de uma maneira consistente (ou de uma maneira, e alterna como um caso especial)
Obrigada!
Portanto, item-right
é usado especificamente para projeção de conteúdo. Acho que fazer este atributo alinhar o texto seria confuso, pois item-right
é usado para posicionar elementos fora de input-wrapper
, mas isso não funcionará em um ion-input
porque ele está colocado dentro de input-wrapper
.
Adicionamos alguns documentos sobre projeção de conteúdo ao item: http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement
Acho que a melhor solução para isso é a documentação. O alinhamento do texto deve ser feito usando os atributos do utilitário: http://ionicframework.com/docs/v2/theming/css-utilities/
Eu criei um problema para adicionar documentação para isso: https://github.com/driftyco/ionic-site/issues/661
Obrigado pelo problema!
Comentários muito úteis
Então você deseja que o texto de entrada seja alinhado à direita? Talvez você tenha uma foto do que está procurando?
Você pode usar o atributo
text-right
emion-input
para alinhar o texto corretamente, mas parece que há alguns problemas de IU com o preenchimento correto ao fazer isso: