mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
refactor(menu-toggle): change menu-button to be a generic menu-toggle instead
This commit is contained in:
Dan Bucholtz
61
packages/core/src/components.d.ts
vendored
61
packages/core/src/components.d.ts
vendored
@ -1539,37 +1539,6 @@ declare global {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
import {
|
|
||||||
MenuButton as IonMenuButton
|
|
||||||
} from './components/menu-button/menu-button';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLElement {
|
|
||||||
}
|
|
||||||
var HTMLIonMenuButtonElement: {
|
|
||||||
prototype: HTMLIonMenuButtonElement;
|
|
||||||
new (): HTMLIonMenuButtonElement;
|
|
||||||
};
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ion-menu-button": HTMLIonMenuButtonElement;
|
|
||||||
}
|
|
||||||
interface ElementTagNameMap {
|
|
||||||
"ion-menu-button": HTMLIonMenuButtonElement;
|
|
||||||
}
|
|
||||||
namespace JSX {
|
|
||||||
interface IntrinsicElements {
|
|
||||||
"ion-menu-button": JSXElements.IonMenuButtonAttributes;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
namespace JSXElements {
|
|
||||||
export interface IonMenuButtonAttributes extends HTMLAttributes {
|
|
||||||
iconName?: string;
|
|
||||||
menu?: string;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
MenuController as IonMenuController
|
MenuController as IonMenuController
|
||||||
} from './components/menu-controller/menu-controller';
|
} from './components/menu-controller/menu-controller';
|
||||||
@ -1600,6 +1569,36 @@ declare global {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
MenuToggle as IonMenuToggle
|
||||||
|
} from './components/menu-toggle/menu-toggle';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLIonMenuToggleElement extends IonMenuToggle, HTMLElement {
|
||||||
|
}
|
||||||
|
var HTMLIonMenuToggleElement: {
|
||||||
|
prototype: HTMLIonMenuToggleElement;
|
||||||
|
new (): HTMLIonMenuToggleElement;
|
||||||
|
};
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ion-menu-toggle": HTMLIonMenuToggleElement;
|
||||||
|
}
|
||||||
|
interface ElementTagNameMap {
|
||||||
|
"ion-menu-toggle": HTMLIonMenuToggleElement;
|
||||||
|
}
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
"ion-menu-toggle": JSXElements.IonMenuToggleAttributes;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
namespace JSXElements {
|
||||||
|
export interface IonMenuToggleAttributes extends HTMLAttributes {
|
||||||
|
menu?: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Menu as IonMenu
|
Menu as IonMenu
|
||||||
} from './components/menu/menu';
|
} from './components/menu/menu';
|
||||||
|
|||||||
@ -1,31 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const { By, until } = require('selenium-webdriver');
|
|
||||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
|
||||||
|
|
||||||
class E2ETestPage extends Page {
|
|
||||||
constructor(driver, platform) {
|
|
||||||
super(driver, `http://localhost:3333/src/components/menu/test/basic?ionicplatform=${platform}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
present(buttonId) {
|
|
||||||
this.navigate();
|
|
||||||
this.driver.findElement(By.id(buttonId)).click();
|
|
||||||
this.driver.wait(until.elementLocated(By.css('.menu-inner')));
|
|
||||||
return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.menu-inner'))));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
platforms.forEach(platform => {
|
|
||||||
describe('menu/basic', () => {
|
|
||||||
register('should init', driver => {
|
|
||||||
const page = new E2ETestPage(driver, platform);
|
|
||||||
return page.navigate();
|
|
||||||
});
|
|
||||||
|
|
||||||
register('should open left menu', driver => {
|
|
||||||
const page = new E2ETestPage(driver, platform);
|
|
||||||
return page.present('left');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,30 +1,26 @@
|
|||||||
import { Component, Prop } from '@stencil/core';
|
import { Component, Listen, Prop } from '@stencil/core';
|
||||||
import { getOrAppendElement } from '../../utils/helpers';
|
import { getOrAppendElement } from '../../utils/helpers';
|
||||||
import { StencilElement } from '../..';
|
import { StencilElement } from '../..';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-menu-button',
|
tag: 'ion-menu-toggle',
|
||||||
styleUrls: {
|
styleUrls: {
|
||||||
ios: 'menu-button.ios.scss',
|
ios: 'menu-toggle.ios.scss',
|
||||||
md: 'menu-button.md.scss'
|
md: 'menu-toggle.md.scss'
|
||||||
},
|
},
|
||||||
host: {
|
host: {
|
||||||
theme: 'back-button'
|
theme: 'menu-toggle'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class MenuButton {
|
export class MenuToggle {
|
||||||
|
|
||||||
/**
|
|
||||||
* The name of the icon to use for the button. It defaults to menu.
|
|
||||||
*/
|
|
||||||
@Prop() iconName = 'menu';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
|
* Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
|
||||||
*/
|
*/
|
||||||
@Prop() menu: string = null;
|
@Prop() menu: string = null;
|
||||||
|
|
||||||
toggleMenu() {
|
@Listen('child:click')
|
||||||
|
toggle() {
|
||||||
const menuControllerElement = getOrAppendElement('ion-menu-controller') as HTMLIonMenuControllerElement;
|
const menuControllerElement = getOrAppendElement('ion-menu-controller') as HTMLIonMenuControllerElement;
|
||||||
return (menuControllerElement as any as StencilElement).componentOnReady().then(() => {
|
return (menuControllerElement as any as StencilElement).componentOnReady().then(() => {
|
||||||
const menu = menuControllerElement.get(this.menu);
|
const menu = menuControllerElement.get(this.menu);
|
||||||
@ -35,13 +31,7 @@ export class MenuButton {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return [
|
return <slot></slot>;
|
||||||
<ion-button onClick={() => {
|
|
||||||
this.toggleMenu();
|
|
||||||
}}>
|
|
||||||
<ion-icon slot='icon-only' name={this.iconName}></ion-icon>
|
|
||||||
</ion-button>
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -7,13 +7,6 @@
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
#### iconName
|
|
||||||
|
|
||||||
string
|
|
||||||
|
|
||||||
The name of the icon to use for the button. It defaults to menu.
|
|
||||||
|
|
||||||
|
|
||||||
#### menu
|
#### menu
|
||||||
|
|
||||||
string
|
string
|
||||||
@ -23,13 +16,6 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri
|
|||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
#### iconName
|
|
||||||
|
|
||||||
string
|
|
||||||
|
|
||||||
The name of the icon to use for the button. It defaults to menu.
|
|
||||||
|
|
||||||
|
|
||||||
#### menu
|
#### menu
|
||||||
|
|
||||||
string
|
string
|
||||||
@ -59,11 +59,15 @@
|
|||||||
|
|
||||||
<ion-header>
|
<ion-header>
|
||||||
<ion-toolbar>
|
<ion-toolbar>
|
||||||
<ion-title>Menu Button - Basic</ion-title>
|
<ion-buttons slot="start">
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-button>
|
||||||
|
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Menu Toggle - Basic</ion-title>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-menu-button></ion-menu-button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content padding>
|
<ion-content padding>
|
||||||
@ -85,29 +89,24 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
async function openDefault() {
|
async function openDefault() {
|
||||||
const menuButton = document.querySelector('ion-menu-button');
|
const menuButton = document.querySelector('ion-menu-toggle');
|
||||||
await menuButton.componentOnReady();
|
await menuButton.componentOnReady();
|
||||||
menuButton.menu = null;
|
menuButton.menu = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function openLeft() {
|
async function openLeft() {
|
||||||
const menuButton = document.querySelector('ion-menu-button');
|
const menuButton = document.querySelector('ion-menu-toggle');
|
||||||
await menuButton.componentOnReady();
|
await menuButton.componentOnReady();
|
||||||
menuButton.menu = 'left';
|
menuButton.menu = 'left';
|
||||||
}
|
}
|
||||||
|
|
||||||
async function openRight() {
|
async function openRight() {
|
||||||
const menuButton = document.querySelector('ion-menu-button');
|
const menuButton = document.querySelector('ion-menu-toggle');
|
||||||
await menuButton.componentOnReady();
|
await menuButton.componentOnReady();
|
||||||
menuButton.menu = 'right';
|
menuButton.menu = 'right';
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
ion-menu-button {
|
|
||||||
height: 44px;
|
|
||||||
background-color: blue;
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Menu - Basic</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
|
<script src="/dist/ionic.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-menu side="left" class="e2eLeftMenu">
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Left Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-item>Open Right Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Footer</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-footer>
|
||||||
|
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<ion-page main>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Menu Toggle - Button</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-button>Toggle Menu</ion-button>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
|
||||||
|
</ion-app>
|
||||||
|
<ion-menu-controller></ion-menu-controller>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
240
packages/core/src/components/menu-toggle/test/list/index.html
Normal file
240
packages/core/src/components/menu-toggle/test/list/index.html
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Menu - Basic</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
|
<script src="/dist/ionic.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-menu side="left" class="e2eLeftMenu">
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Left Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
Menu Content
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Footer</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-footer>
|
||||||
|
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<ion-page main>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Menu Toggle - List</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
<ion-list>
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
List Item
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
|
||||||
|
</ion-app>
|
||||||
|
<ion-menu-controller></ion-menu-controller>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user