diff --git a/core/api.txt b/core/api.txt index 52a261f9cc..8e5eaa184b 100644 --- a/core/api.txt +++ b/core/api.txt @@ -651,6 +651,8 @@ ion-menu,css-prop,--max-width ion-menu,css-prop,--min-height ion-menu,css-prop,--min-width ion-menu,css-prop,--width +ion-menu,part,backdrop +ion-menu,part,container ion-menu-button,shadow ion-menu-button,prop,autoHide,boolean,true,false,false diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 28234ac2cf..12193e24d6 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -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 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({ tag: 'ion-menu', styleUrls: { @@ -569,6 +573,7 @@ AFTER: >
this.menuInnerEl = el} > @@ -579,6 +584,7 @@ AFTER: class="menu-backdrop" tappable={false} stopPropagation={false} + part="backdrop" /> ); diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 679f0c1180..9d875b2665 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -452,6 +452,14 @@ Type: `Promise` +## 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 | Name | Description | diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 86e7cf8089..21f7d97cad 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -24,7 +24,7 @@ - + Start Menu @@ -94,6 +94,16 @@ .my-custom-menu { --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); + }