expose-aside-when
Child of ionSideMenus
It is common for a tablet application to hide a menu when in portrait mode, but to show the
same menu on the left side when the tablet is in landscape mode. The exposeAsideWhen
attribute
directive can be used to accomplish a similar interface.
By default, side menus are hidden underneath its side menu content, and can be opened by either
swiping the content left or right, or toggling a button to show the side menu. However, by adding the
exposeAsideWhen
attribute directive to an ionSideMenu
element directive,
a side menu can be given instructions on “when” the menu should be exposed (always viewable). For
example, the expose-aside-when="large"
attribute will keep the side menu hidden when the viewport’s
width is less than 768px
, but when the viewport’s width is 768px
or greater, the menu will then
always be shown and can no longer be opened or closed like it could when it was hidden for smaller
viewports.
Using large
as the attribute’s value is a shortcut value to (min-width:768px)
since it is
the most common use-case. However, for added flexibility, any valid media query could be added
as the value, such as (min-width:600px)
or even multiple queries such as
(min-width:750px) and (max-width:1200px)
.
Usage
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu expose-aside-when="large">
</ion-side-menu>
</ion-side-menus>
For a complete side menu example, see the
ionSideMenus
documentation.