javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(readme): move usages from readme to usage folder (#18384)

Browse Source 
closes ionic-team/ionic-docs#664
closes ionic-team/ionic-docs#550
closes ionic-team/ionic-docs#148
This commit is contained in:
Brandy Carney
2019-05-29 17:19:42 -04:00
committed by GitHub
parent b2290a6420
commit 17ad73ace2
14 changed files with 729 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/split-pane/readme.md
View File

@@ -1,27 +1,22 @@
# 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.
A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be
displayed as the viewport width 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.
If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.
### Setting breakpoints
### Setting Breakpoints
By default, SplitPane will expand when the screen is larger than 992px.
If you want to customize this, use the `when` input. The `when` input can
accept any valid media query, as it uses `matchMedia()` underneath.
By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the `when` property. The `when` property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.
SplitPane also provides some predefined media queries that can be used.
```html
<!-- could be "xs", "sm", "md", "lg", or "xl" -->
<!-- can be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="md"></ion-split-pane>
<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
```
@@ -33,9 +28,6 @@ SplitPane also provides some predefined media queries that can be used.
| `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px (default break point) |
| `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.
<!-- Auto Generated Below -->