To use SplitPane, Simply add the <ion-split-pane> around your root component ie. <ion-nav>, and add the main attribute to it . In this example, we'll be using a sidemenu layout template.
Code to implement SplitPane in ionic 2, just copy and paste in app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- the content body -->
</ion-content>
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" #content></ion-nav>
add <ion-split-pane> component to wrap around the main <ion-nav> component like this.
<ion-split-pane>
<!-- side menu -->
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- content body -->
</ion-content>
</ion-menu>
<!-- main content -->
<ion-nav [root]="root" #content></ion-nav>
</ion-split-pane>
Now, add the main attribute to it so that Ionic knows what should go in the right part of the ionic split pane, ie the central component on the larger screens.
<ion-split-pane>
<!-- ... -->
<ion-nav [root]="root" #content main></ion-nav>
</ion-split-pane>
that's it, now if you play with your browser window by adjusting its layout size. you can see the side menu pane changing.
By default, SplitPane will oly appear if the screen is larger than 768px. we can customize this, by using when input property on ion-split-pane component as shown below.
<ion-split-pane when="(min-width: 475px)">
<!-- side menu -->
<ion-menu [content]="content">
</ion-menu>
<!-- main content -->
<ion-nav [root]="root" #content main ></ion-nav>
</ion-split-pane>
Ionic SplitPane can alse be given some predefined media queries that can be used. they are "xs", "sm", "md", "lg", and "xl". these specify the minimum width required to split the ionic-pane.
<ion-split-pane when="xs">
...
</ion-split-pane>
here,
xs : means min-width is 0px, this will make the split-pane to appear always.
sm: means min-width is 576px, this will make the split-pane to appear when the min-width is 576px
md: means min-width is 768px,this will show the split-pane when the min-width is 768px (default break point)
lg: means min-width is 992px, this will make the split-pane to appearwhen the min-width is 992px
xl: means min-width is 1200px, this will show the split-pane split-pane when the min-width is 1200px
One can also pass boolean values to it so that, it will trigger SplitPane when the value or expression evaluates to true.
<ion-split-pane [when]="isSmall">
</ion-split-pane>
in .ts file above constructer add this
class MySplittPaneClass {
public isSmall= true;
constructor(){}
}
or, you can call a method like this
<ion-split-pane [when]="showSplitScreen()">
</ion-split-pane>
in respectedd .ts file add this,
class MySplittPaneClass {
constructor(){}
showSplitScreen(){
if(conditionA){
return true;
} else {
return false;
}
}
}
Disable ionSplitPane
to disable or enable split pane in ionic project, use input property "enable". it takes boolean as value. If the value is false, the split-pane will be disabled, ie. the side pane will never be displayed. the enable input property default's to true.
No comments:
Post a comment