
Menu Expose
Ionic v2/v3 ion-menu with desktop/tablet layout
$10.00
Details
- Version:
- 1.0
- Ionic:
- 3.x
- Platforms:
- iOS, Android
- Released:
- 4 years ago
- Updated:
- 2 years ago
- Category:
- Plugins
- Tags:
- ,
Menu Expose for Ionic v2/v3 is the directive for enabling tablet/desktop menu on ion-menu component (demo).
Installation:
- Download the zip file and unzip it;
- Copy files from
mama-menu-expose/src
and paste them intosrc
folder within your project; - Import directive in
app.module.ts
:
```javascript import { MamaMenuExpose } from './../mama-menu-expose.component'; ...
@NgModule({ declarations: [ ..., MamaMenuExpose ], ... }) export class AppModule {} ```
Usage:
The initial setup for exposing menu is when window width is equal or larger than 1024px. To change initial value, add following line into src/theme/variables.scss
:
$mama-menu-expose-when: 900px;
if menu should expose when window width is equal or larger than 900px. This value can also be changed on the beginning of mama-menu-expose.component.scss
file.
Note: If type
of ion-menu
is not overlay
(link), attribute mamaMenuExposeWhen
should be set on ion-nav
component:
html
<ion-nav ...
mamaMenuExposeWhen="900">
</ion-nav>
where value of attribute mamaMenuExposeWhen
should be the same as value of variable $mama-menu-expose-when
in scss, but without px
. If the initial value of $mama-menu-expose-when
variable is not changed, attribute mamaMenuExposeWhen
can be set without value:
html
<ion-nav ...
mamaMenuExposeWhen>
</ion-nav>
Options:
[mamaMenuExposeWhen]
(optional number) - use only iftype
ofion-menu
is notoverlay
. Usage is explained above;