Ionic-framework: v2 item-direito de texto / entrada de número no formulário

Criado em 18 fev. 2016  ·  3Comentários  ·  Fonte: ionic-team/ionic-framework

Breve descrição do problema:

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

Que comportamento você está esperando?

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)

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 em ion-input para alinhar o texto corretamente, mas parece que há alguns problemas de IU com o preenchimento correto ao fazer isso:

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

Todos 3 comentários

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:

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

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!

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

MrBokeh picture MrBokeh  ·  3Comentários

alexbainbridge picture alexbainbridge  ·  3Comentários

giammaleoni picture giammaleoni  ·  3Comentários

RobFerguson picture RobFerguson  ·  3Comentários

vswarte picture vswarte  ·  3Comentários