Ejercicios 2
Last updated
Was this helpful?
Last updated
Was this helpful?
En esta sección de ejercicios vamos a continuar con la aplicación anterior y vamos a añadirle los componentes visuales de cada una de las pantallas.
Modifica el contenido de la página home para que tenga un aspecto similar al de la siguiente captura:
Instrucciones:
Comprueba que se aplique el atributo padding a la sección de contenido para dejar un pequeño margen de borde.
Dentro del área de contenido crea dos tarjetas usando el elemento cards con el contenido indicado.
El elemento "Acceso a iBiblioteca" será un botón que nos permitirá acceder a la biblioteca (de momento no funcional).
El elemento "Consultar información" será un botón para acceder a más información sobre el autor (de momento no funcional).
En este ejercicio vamos definir los componentes de la página "autor", la cual tendrá una tarjeta (elemento tipo card) con el siguiente contenido:
Donde:
El elemento "Currículum Vítae" será un botón que nos llevará a otra página para consultar el currículum (no funcional).
El elemento de correo será un enlace tipo "mailto:gmail@gmail.com".
El elemento de Twitter será un enlace normal a una cuenta de Twitter.
El elemento con el teléfono será un enlace del tipo "tel:900900900".
Para definir el aspecto de la página "curriculum" insertaremos un elemento tipo lista con los estudios realizados o los últimos puestos ocupados. Por ejemplo:
Al usar un elemento tipo lista no tendréis que poner padding a la sección de contenido.
La página "biblioteca" mostrará el listado de los libros de nuestra biblioteca. En la sección de contenido añadiremos un elemento tipo lista para mostrar los libros con un formato similar al de la siguiente imagen:
El tipo de lista utilizado es el "Thumbnail List", donde cada elemento de la lista en lugar de ser un "ion-item" es un "button" con el atributo "ion-item":
<button ion-item>. Además, en cada elemento se ha añadido un "ion-icon" con el atributo "item-end" para que se coloque al final del item.
En la plantilla de estos ejercicios tenéis disponible un XML con los datos de los libros de ejemplo y sus correspondientes imágenes para las portadas.
Esta pantalla de momento no tiene que realizar ninguna acción más, solamente mostrar el listado de libros. En los ejercicios de las siguientes secciones lo completaremos con mas funcionalidad.
