Ionic Framework By Example by Sani Yusuf

Author:Sani Yusuf [Yusuf, Sani]
Language: eng
Format: epub, azw3, pdf
Publisher: Packt Publishing
Published: 2016-01-26T23:00:00+00:00

The <ion-side-menu-content>element

This element is what houses the main content area or the visible part of the app:

In the preceding screenshot, which is a view of our LTA app, the part you see is a representative of<ion-side-menu-content>. Let's have a closer look at the code of < ion-side-menu-content> to see how it actually works in detail:

Within <ion-side-menu-content>, you can see two direct child elements.

Firstly, you can see the <ion-nav-bar> element which is used to build the navigation buttons of the main content area with the<ion-nav-buttons> element as its child element. For example, within these<ion-nav-buttons> elements, you can see a navigation button on line 8-9, which has a menu-toggle attribute of value left. This is simply saying that when this button is tapped, the left-sided side menu should be triggered. Remember that there can be up to two side menus with one being on the left and one being on the right in a side menu app.

The second direct child element is the<ion-nav-view> element on line 12 from the preceding screenshot. We talked about this same element earlier when we had a look at the index.html file. This element is a placeholder for where the actual content is injected. This particular <ion-nav-view> element has a name attribute with the value of menuContent. This attribute is important as it is used like a value to uniquely identify<ion-nav-view>.

With all that said, we have now lightly touched on the <ion-side-menu-content> element and its main functions. Always think of this element as the element that houses the main content area of your side menu application.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.