mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
fix(): update to Stencil One 🎉🎊
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
import { Component, ComponentInterface, Listen, Prop, State } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Listen, Prop, State, h } from '@stencil/core';
|
||||
|
||||
import { Mode } from '../../interface';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-menu-toggle',
|
||||
@ -8,7 +8,6 @@ import { Mode } from '../../interface';
|
||||
shadow: true
|
||||
})
|
||||
export class MenuToggle implements ComponentInterface {
|
||||
mode!: Mode;
|
||||
|
||||
@Prop({ context: 'document' }) doc!: Document;
|
||||
|
||||
@ -38,7 +37,7 @@ export class MenuToggle implements ComponentInterface {
|
||||
|
||||
@Listen('click')
|
||||
async onClick() {
|
||||
const menuCtrl = await getMenuController(this.doc);
|
||||
const menuCtrl = await getMenuController(document);
|
||||
if (menuCtrl) {
|
||||
const menu = await menuCtrl.get(this.menu);
|
||||
if (menu) {
|
||||
@ -47,10 +46,10 @@ export class MenuToggle implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
@Listen('body:ionMenuChange')
|
||||
@Listen('body:ionSplitPaneVisible')
|
||||
@Listen('ionMenuChange', { target: 'body' })
|
||||
@Listen('ionSplitPaneVisible', { target: 'body' })
|
||||
async updateVisibility() {
|
||||
const menuCtrl = await getMenuController(this.doc);
|
||||
const menuCtrl = await getMenuController(document);
|
||||
if (menuCtrl) {
|
||||
const menu = await menuCtrl.get(this.menu);
|
||||
if (menu && await menu.isActive()) {
|
||||
@ -62,11 +61,12 @@ export class MenuToggle implements ComponentInterface {
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const mode = getIonMode(this);
|
||||
const hidden = this.autoHide && !this.visible;
|
||||
return {
|
||||
'aria-hidden': hidden ? 'true' : null,
|
||||
class: {
|
||||
[`${this.mode}`]: true,
|
||||
[`${mode}`]: true,
|
||||
'menu-toggle-hidden': hidden,
|
||||
}
|
||||
};
|
||||
|
||||
@ -17,6 +17,19 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
|
||||
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [ion-menu-button](../menu-button)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
ion-menu-button --> ion-menu-toggle
|
||||
style ion-menu-toggle fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
Reference in New Issue
Block a user