Área de contenidos

Todo lo que escribamos dentro de la sección <body> del fichero index.html (que está en la carpeta "www" de nuestro proyecto) se mostrará como contenido visible de la aplicación. Dentro de esa sección podemos escribir cualquier etiqueta HTML o estilo CSS como si de una página normal se tratase. Por ejemplo, si escribimos el siguiente código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, 
            maximum-scale=1, user-scalable=no, width=device-width">
        <title>My App</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-content>
                <h1>I'm an H1!</h1>
                <h2>I'm an H2!</h2>
                <h3>I'm an H3!</h3>
                <h4>I'm an H4!</h4>
                <h5>I'm an H5!</h5>
                <h6>I'm an H6!</h6>
                <p>I'm a paragraph with a <a href="#">link</a>!</p>
            </ion-content>
        </ion-pane>
    </body>
</html>

Obtendríamos un resultado similar al siguiente:

Como se puede ver en el código, el contenido lo hemos puesto dentro de un panel, definido mediante la directiva <ion-pane>, que lo único que realiza es ajustar el tamaño al contenedor. Dentro de este panel podemos añadir lo que queramos: HTML o elementos definidos por Ionic como cabeceras, footers, listados, etc. El contenido principal tenemos que ponerlo dentro de la directiva <ion-content>, es importante usar esta etiqueta para que funcione el scroll correctamente ya que de otra forma los contenidos aparecerían bloqueados.

El área de contenido (la sección <body>) se mostrará en el móvil con un tamaño fijo, es decir, el usuario no podrá hacer zoom y solo podrá arrastrar con el dedo haciendo scroll de forma vertical. La directiva <ion-content> nos permite realizar ajustes sobre el contenido, como por ejemplo añadir un padding o margen interior con <ion-content class="padding">, o controlar el tipo de scroll. Para más información podéis consultar la documentación en: http://ionicframework.com/docs/api/directive/ionContent/

Resumiendo, el contenido principal de la aplicación tiene que ir dentro de la sección body entre las etiquetas <ion-pane> e <ion-content>. En caso de que sea un elemento que tenga que permanecer en una posición fija como una barra de cabecera o de pie de página lo pondremos fuera de <ion-content> pero dentro de la etiqueta <ion-pane>.

En los siguientes apartados vamos a ver los componentes que incluye Ionic y que podemos añadir a esta sección de contenidos. Estos componentes, a diferencias de las etiquetas HTML normales, vienen con estilos predefinidos que emularán el aspecto de una aplicación nativa, para por ejemplo colocar una cabecera fija con un título en la parte superior o un listado de elementos bien formateado.

PreviousComponentes NextCabeceras

Last updated 4 years ago