f41bb39ce3
* wip * wip * wip * wip * CSS variable cleanup added css variable example * reverted example * wip * name fixes for tabbar and item * wip - alpha support * wip - all the things * wip * wip * PR cleanup * cleanup to ion-color * switched to double quotes * PR cleanup Added TODO for color-mod comments * reverted ios variable for transition. * style cleanup added -ion prefix to all css variables updated default.css to mirror SASS values cleanup/update to oceanic css * removed 'dark' theme files cleanup from scss-lint report
ion-split-pane
SplitPane is a component that makes it possible to create multi-view layout. Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.
If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again. This is especially useful when creating an app that will be served over a browser or deployed through the app store to phones and tablets.
To use SplitPane, simply add the component around your root component. In this example, we'll be using a sidemenu layout, similar to what is provided from the sidemenu starter template.
<ion-split-pane>
<!-- our side menu -->
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main></ion-nav>
</ion-split-pane>
Here, SplitPane will look for the element with the main attribute and make
that the central component on larger screens. The main component can be any
Ionic component (ion-nav or ion-tabs) except ion-menu.
Setting breakpoints
By default, SplitPane will expand when the screen is larger than 768px.
If you want to customize this, use the when input. The when input can
accept any valid media query, as it uses matchMedia() underneath.
<ion-split-pane when="(min-width: 475px)">
<!-- our side menu -->
<ion-menu>
....
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main></ion-nav>
</ion-split-pane>
SplitPane also provides some predefined media queries that can be used.
<!-- could be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="lg">
...
</ion-split-pane>
| Size | Value | Description |
|---|---|---|
xs |
(min-width: 0px) |
Show the split-pane when the min-width is 0px (meaning, always) |
sm |
(min-width: 576px) |
Show the split-pane when the min-width is 576px |
md |
(min-width: 768px) |
Show the split-pane when the min-width is 768px (default break point) |
lg |
(min-width: 992px) |
Show the split-pane when the min-width is 992px |
xl |
(min-width: 1200px) |
Show the split-pane when the min-width is 1200px |
You can also pass in boolean values that will trigger SplitPane when the value or expression evaluates to true.
<ion-split-pane [when]="isLarge">
...
</ion-split-pane>
class MyClass {
public isLarge = false;
constructor(){}
}
Or
<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
constructor(){}
shouldShow(){
if(conditionA){
return true
} else {
return false
}
}
}
Properties
disabled
boolean
If true, the split pane will be hidden. Defaults to false.
when
When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
Attributes
disabled
boolean
If true, the split pane will be hidden. Defaults to false.
when
When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
Events
ionChange
Emitted when the split pane is visible.
ionSplitPaneDidChange
Expression to be called when the split-pane visibility has changed
Methods
isVisible()
Built by StencilJS