javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): add parts support for backdrop, container (#20978)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-23 12:22:19 -04:00
committed by GitHub
parent 76ca475734
commit 50bc212d0b
4 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -651,6 +651,8 @@ ion-menu,css-prop,--max-width
ion-menu,css-prop,--min-height ion-menu,css-prop,--min-height
ion-menu,css-prop,--min-width ion-menu,css-prop,--min-width
ion-menu,css-prop,--width ion-menu,css-prop,--width
ion-menu,part,backdrop
ion-menu,part,container
ion-menu-button,shadow ion-menu-button,shadow
ion-menu-button,prop,autoHide,boolean,true,false,false ion-menu-button,prop,autoHide,boolean,true,false,false

6
core/src/components/menu/menu.tsx
View File

@ -13,6 +13,10 @@ const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)'; const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)'; const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
/**
* @part container - The container for the menu content.
* @part backdrop - The backdrop that appears over the main content when the menu is open.
*/
@Component({ @Component({
tag: 'ion-menu', tag: 'ion-menu',
styleUrls: { styleUrls: {
@ -569,6 +573,7 @@ AFTER:
> >
<div <div
class="menu-inner" class="menu-inner"
part="container"
ref={el => this.menuInnerEl = el} ref={el => this.menuInnerEl = el}
> >
<slot></slot> <slot></slot>
@ -579,6 +584,7 @@ AFTER:
class="menu-backdrop" class="menu-backdrop"
tappable={false} tappable={false}
stopPropagation={false} stopPropagation={false}
part="backdrop"
/> />
</Host> </Host>
); );

8
core/src/components/menu/readme.md
View File

@ -452,6 +452,14 @@ Type: `Promise<boolean>`
## Shadow Parts
| Part | Description |
| ------------- | ---------------------------------------------------------------------- |
| `"backdrop"` | The backdrop that appears over the main content when the menu is open. |
| `"container"` | The container for the menu content. |
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |

12
core/src/components/menu/test/basic/index.html
View File

@ -24,7 +24,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-menu side="start" menu-id="first" id="start-menu" content-id="main"> <ion-menu side="start" menu-id="first" id="start-menu" content-id="main" class="menu-part">
<ion-header> <ion-header>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-title>Start Menu</ion-title> <ion-title>Start Menu</ion-title>
@ -94,6 +94,16 @@
.my-custom-menu { .my-custom-menu {
--width: 500px; --width: 500px;
} }
.menu-part::part(backdrop) {
background-color: rgba(255, 0, 255, 0.5);
}
.menu-part::part(container) {
border-radius: 0 20px 20px 0;
box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
}
</style> </style>
<script> <script>