ion-split-pane
Ionic4项目中我们可以使用Ionic4侧边栏组件ion-split-pane对项目进行布局。 ion-split-pane官方文档地址:https://ionicframework.com/docs/api/split-paneSplitPane 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.
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.
SplitPane also provides some predefined media queries that can be used.
<ion-split-pane when="md">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 |
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.
ion-split-pane 用法(Usage)
<ion-split-pane contentId="menu-content">
<ion-menu contentId="menu-content">
<ion-header>
<ion-toolbar>
<ion-title>Menuion-title>
ion-toolbar>
ion-header>
ion-menu>
<ion-router-outlet id="menu-content">ion-router-outlet>
ion-split-pane>
<ion-split-pane content-id="menu-content">
<ion-menu content-id="menu-content">
<ion-header>
<ion-toolbar>
<ion-title>Menuion-title>
ion-toolbar>
ion-header>
ion-menu>
<ion-content id="menu-content">
<h1>Helloh1>
ion-content>
ion-split-pane>
import React from 'react';
import { IonSplitPane, IonMenu, IonHeader, IonToolbar, IonTitle, IonRouterOutlet } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonSplitPane contentId="menuContent">
{/*-- our side menu --*/}
<IonMenu contentId="menuContent">
<IonHeader>
<IonToolbar>
<IonTitle>MenuIonTitle>
IonToolbar>
IonHeader>
IonMenu>
{/*-- the main content --*/}
<IonRouterOutlet>IonRouterOutlet>
IonSplitPane>
);
export default Example;
<template>
<ion-split-pane contentId="menu-content">
<ion-menu contentId="menu-content">
<ion-header>
<ion-toolbar>
<ion-title>Menuion-title>
ion-toolbar>
ion-header>
ion-menu>
<ion-router-outlet id="menu-content">ion-router-outlet>
ion-split-pane>
template>
ion-split-pane 属性(Properties)
contentId | |
---|---|
Description | The content |
Attribute | content-id |
Type | string | undefined |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
when | |
Description | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. |
Attribute | when |
Type | boolean | string |
Default | QUERY['lg'] |
ion-split-pane 事件(Events)
Name | Description |
---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed |
ion-split-pane中的CSS 自定义属性
Name | Description |
---|---|
--border | Border between panes |