Scribd Logo
Importer

Bienvenue sur Scribd !

  • Pie de Página Con Ionic

    Transféré par

    Roberto Carlos Ayala
    153 vues2 pages
    codigo

    Titre original

    Pie de Página con Ionic

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    codigo

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    153 vues2 pages

    Pie de Página Con Ionic

    Transféré par

    Roberto Carlos Ayala
    codigo

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    Pie de pgina con Ionic

    Permiten aadir una barra fija en la parte inferior de la pantalla que pueden
    contener distintos tipos de contenidos. Se utiliza la directiva <ion-footer-bar> :
    <ion-footer-bar class="bar-balanced">
    <h1 class="title">Footer</h1>
    </ion-footer-bar>
    Se obtiene lo siguiente:

    Adems podemos usar las clases CSS de color que vimos para las cabeceras,
    estas eran:
    Color Ejemplo

    bar-light

    bar-
    stable

    bar-
    positive

    bar-calm

    bar-
    balanced

    bar-
    energized
    Color Ejemplo

    bar-
    assertive

    bar-royal

    bar-dark

    Ejemplo
    A continuacin se muestra una aplicacin con una cabecera, un pie de pgina y
    un texto dentro del rea de contenido:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,
    user-scalable=no, width=device-width">
    <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-header-bar class="bar-positive">
    <h1 class="title">Cabecera</h1>
    </ion-header-bar>
    <ion-content class="padding">
    <h1>Mi primera aplicacin</h1>
    <p>Texto de ejemplo.</p>
    </ion-content>
    <ion-footer-bar class="bar-balanced">
    <h1 class="title">Pie de pgina</h1>
    </ion-footer-bar>
    </ion-pane>
    </body>
    </html>

    Vous aimerez peut-être aussi