From 282e4e3e794b77d7df3fb4419d72618fcdbe8407 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Fri, 23 Feb 2018 14:36:04 -0600 Subject: [PATCH] feature(menu-button): initial implementation of menu-button, needs better css support and better dom structure --- packages/core/src/components.d.ts | 34 +++++++++- .../menu-button/menu-button.ios.scss | 0 .../menu-button/menu-button.md.scss | 0 .../components/menu-button/menu-button.tsx | 64 +++++++++++++++++++ .../core/src/components/menu-button/readme.md | 63 ++++++++++++++++++ .../components/menu-toggle/menu-toggle.tsx | 5 ++ .../core/src/components/menu-toggle/readme.md | 6 ++ packages/core/stencil.config.js | 2 +- 8 files changed, 171 insertions(+), 3 deletions(-) create mode 100644 packages/core/src/components/menu-button/menu-button.ios.scss create mode 100644 packages/core/src/components/menu-button/menu-button.md.scss create mode 100644 packages/core/src/components/menu-button/menu-button.tsx create mode 100644 packages/core/src/components/menu-button/readme.md diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index cbea26c80e..8c5bf6605b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -4,8 +4,6 @@ * and imports for stencil collections that might be configured in your stencil.config.js file */ -import 'ionicons'; - import { AnimationBuilder, FrameworkDelegate, @@ -1686,6 +1684,38 @@ declare global { } +import { + MenuButton as IonMenuButton +} from './components/menu-button/menu-button'; + +declare global { + interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLStencilElement { + } + 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 { + autoHide?: boolean; + menu?: string; + mode?: 'ios' | 'md'; + } + } +} + + import { MenuController as IonMenuController } from './components/menu-controller/menu-controller'; diff --git a/packages/core/src/components/menu-button/menu-button.ios.scss b/packages/core/src/components/menu-button/menu-button.ios.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/core/src/components/menu-button/menu-button.md.scss b/packages/core/src/components/menu-button/menu-button.md.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/core/src/components/menu-button/menu-button.tsx b/packages/core/src/components/menu-button/menu-button.tsx new file mode 100644 index 0000000000..9dead27112 --- /dev/null +++ b/packages/core/src/components/menu-button/menu-button.tsx @@ -0,0 +1,64 @@ +import { Component, Element, Prop, State } from '@stencil/core'; +import { Config } from '../../index'; + +@Component({ + tag: 'ion-menu-button', + styleUrls: { + ios: 'menu-button.ios.scss', + md: 'menu-button.md.scss' + }, + host: { + theme: 'menu-button' + } +}) +export class MenuButton { + + @State() custom: boolean; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + */ + @Prop() mode: 'ios' | 'md'; + + /** + * 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; + + /** + * Automatically hides the content when the corresponding menu is not + * active + */ + @Prop() autoHide = true; + + + @Prop({ context: 'config' }) config: Config; + + @Element() el: HTMLElement; + + componentWillLoad() { + this.custom = this.el.childElementCount > 0; + } + + render() { + const menuIcon = this.config.get('menuIcon', 'menu'); + + if (this.custom) { + return ( + + + + ); + } else { + return ( + + + + + + ); + } + } +} diff --git a/packages/core/src/components/menu-button/readme.md b/packages/core/src/components/menu-button/readme.md new file mode 100644 index 0000000000..650285a720 --- /dev/null +++ b/packages/core/src/components/menu-button/readme.md @@ -0,0 +1,63 @@ +# ion-menu-button + + + + + + +## Properties + +#### autoHide + +boolean + +Automatically hides the content when the corresponding menu is not +active + + +#### menu + +string + +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 + + +#### mode + + + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. +For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + + +## Attributes + +#### auto-hide + +boolean + +Automatically hides the content when the corresponding menu is not +active + + +#### menu + +string + +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 + + +#### mode + + + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. +For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/menu-toggle/menu-toggle.tsx b/packages/core/src/components/menu-toggle/menu-toggle.tsx index c55fe97168..be4a4ca3d6 100644 --- a/packages/core/src/components/menu-toggle/menu-toggle.tsx +++ b/packages/core/src/components/menu-toggle/menu-toggle.tsx @@ -7,11 +7,16 @@ import { Component, Listen, Prop, State } from '@stencil/core'; export class MenuToggle { @State() visible = false; + /** * 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; + /** + * Automatically hides the content when the corresponding menu is not + * active + */ @Prop() autoHide = true; componentDidLoad() { diff --git a/packages/core/src/components/menu-toggle/readme.md b/packages/core/src/components/menu-toggle/readme.md index 17064e2eba..a29e55a641 100644 --- a/packages/core/src/components/menu-toggle/readme.md +++ b/packages/core/src/components/menu-toggle/readme.md @@ -11,6 +11,9 @@ boolean +Automatically hides the content when the corresponding menu is not +active + #### menu @@ -25,6 +28,9 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri boolean +Automatically hides the content when the corresponding menu is not +active + #### menu diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 26acf1b53f..e04ce6c5b8 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -27,7 +27,7 @@ exports.config = { { components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] }, { components: ['ion-input', 'ion-textarea'] }, { components: ['ion-loading', 'ion-loading-controller'] }, - { components: ['ion-menu', 'ion-menu-controller'] }, + { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] }, { components: ['ion-modal', 'ion-modal-controller'] }, { components: ['ion-nav', 'ion-page', 'ion-back-button'] }, { components: ['ion-popover', 'ion-popover-controller'] },