Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Build a Sidebar Layout with Ionic

    angularjsAngularJS
    ionicIonic
    1.2.1

    In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:

    • ion-side-menus - A container element for side menu(s) and the main visible content.
    • ion-side-menu-content - A container for the main visible content, sibling to one or more ionSideMenu directives.
    • ion-side-menu - A container for a side menu, sibling to an ionSideMenuContent directive.
    • ion-nav-view - Used to render templates in your application. Each template is part of a state. States are usually mapped to a url, and are defined programatically using angular-ui-router (see their docs for reference).
    • ion-view - A container for view content and any navigational and header bar information. Used as a child of ionNavView.
    • ion-nav-bar - If we have an ionNavView directive, we can also create an ionNavBar, which will create a topbar that updates as the application state changes.
    • ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar from within an ionView.
    • ion-content- Provides an easy to use content area that can be configured to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
    • ion-list - The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
    • ion-item - Used to create items inside of an ionList.