javascript - color - ionic navbar image
Ionic: ¿Cómo mostrar iones de iones en múltiples líneas? (4)
Debería sobrescribir el CSS predeterminado agregado al <ion-item> específico, por ejemplo, cambiar:
<ion-item class="item">
bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>
A:
<ion-item class="item" style="white-space: normal;">
bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>
LA SITUACIÓN:
Estoy usando Ionic para construir una aplicación.
Necesito mostrar una lista de información sobre algunas personas. Para obtener eso, estoy usando la lista iónica <ion-list> junto con <ion-item> ya que el diseño que ofrece es exactamente lo que necesito.
El único problema es que cada <ion-item> parece estar obligado a permanecer en una sola línea, cortando el texto adicional que contiene, como se muestra en la imagen:
EL CÓDIGO:
<ion-list>
<ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item>
<ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item>
<ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item>
<ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item>
</ion-list>
PLUNKER:
Aquí hay un plunker que recrea la situación. Puede intentar cambiar el tamaño del navegador o de las ventanas internas, y puede ver cómo los elementos iónicos eliminan el contenido adicional.
http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview
LA PREGUNTA:
¿Cómo puedo mostrar el contenido adicional en un elemento <ion-item> ?
¿Es posible mostrar el contenido en múltiples líneas?
EDITAR: Aunque marcado como aceptado, esta respuesta fue escrita para una versión anterior de Ionic. Las probabilidades son, usted querrá una de las respuestas a continuación para las versiones más nuevas.
La clase item-text-wrap debería ayudarte, así:
<ion-item class="item item-text-wrap">
bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>
En Ionic v4 puede adjuntar el atributo de text-wrap al componente de ion-label ion-item dentro de un ion-item . Por ejemplo:
<ion-item>
<ion-label text-wrap>
Multiline text that should wrap when it is too long to fit on one line in the item.
</ion-label>
</ion-item>
Para usuarios de Ionic 2, puede usar el atributo de text-wrap como:
<ion-item text-wrap>
Multiline text that should wrap when it is too long to fit on one line in the item.
</ion-item>
También puede ver la Documentación de atributos de utilidad para los atributos que se pueden agregar a ion-item para transformar el texto.