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

fix(menu-button): get proper styles when used inside ion-buttons

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-07-24 01:56:52 +02:00
parent f6c8f3f993
commit 811eee70f8
20 changed files with 118 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/package.json
View File

@ -24,7 +24,7 @@
"css/"
],
"dependencies": {
"ionicons": "4.2.4"
"ionicons": "4.2.5"
},
"devDependencies": {
"@stencil/core": "^0.10.7",

16
core/src/components.d.ts vendored
View File

@ -3766,10 +3766,18 @@ declare global {
* Automatically hides the menu button when the corresponding menu is not active
*/
'autoHide': boolean;
/**
* The color to use for the background of the item.
*/
'color': Color;
/**
* 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
*/
'menu': string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
}
}
@ -3796,10 +3804,18 @@ declare global {
* Automatically hides the menu button when the corresponding menu is not active
*/
'autoHide'?: boolean;
/**
* The color to use for the background of the item.
*/
'color'?: Color;
/**
* 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
*/
'menu'?: string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode'?: Mode;
}
}
}

6
core/src/components/app/test/cordova/index.html
View File

@ -112,11 +112,7 @@
<ion-header>
<ion-toolbar color='primary'>
<ion-buttons slot='start'>
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-segment color='light'>
<ion-segment-button checked>All</ion-segment-button>

6
core/src/components/buttons/buttons.ios.scss
View File

@ -5,7 +5,7 @@
// iOS Toolbar Button Default
// --------------------------------------------------
::slotted(*) ion-button {
::slotted(*) .button {
--padding-top: 0;
--pading-bottom: 0;
--padding-start: 5px;
@ -53,14 +53,14 @@
pointer-events: none;
}
::slotted(*) ion-button.button-clear {
::slotted(*) .button.button-clear {
--height: 35px;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
::slotted(*) ion-button.button-solid-ios:hover {
::slotted(*) .button.button-solid-ios:hover {
opacity: .4;
}

8
core/src/components/buttons/buttons.md.scss
View File

@ -8,7 +8,7 @@
@include margin(0, 2px);
}
::slotted(*) ion-button {
::slotted(*) .button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
@ -48,14 +48,14 @@
pointer-events: none;
}
::slotted(*) ion-button.button-solid,
::slotted(*) ion-button.button-outline {
::slotted(*) .button.button-solid,
::slotted(*) .button.button-outline {
--ion-color-base: #{$toolbar-md-text-color};
--ion-color-contrast: #{$toolbar-md-background-color};
--ion-color-shade: #{$toolbar-md-text-color};
}
::slotted(*) ion-button.button-clear {
::slotted(*) .button.button-clear {
--ion-color-base: currentColor;
--height: 45px;
}

6
core/src/components/buttons/buttons.scss
View File

@ -1,7 +1,9 @@
@import "../../themes/ionic.globals";
:host {
display: block;
display: flex;
align-items: center;
transform: translateZ(0);
@ -12,7 +14,7 @@
// Toolbar Buttons
// --------------------------------------------------
::slotted(*) ion-button {
::slotted(*) .button {
--margin-top: 0;
--margin-bottom: 0;
--margin-start: 0;

6
core/src/components/buttons/usage/angular.md
View File

@ -31,11 +31,7 @@
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
```

35
core/src/components/menu-button/menu-button.ios.scss
View File

@ -4,37 +4,14 @@
// iOS Menu Button
// --------------------------------------------------
.menu-button-inner {
@include padding(0);
@include margin(2px, 0, 0, 0);
min-height: 32px;
transform: translateZ(0);
border: 0;
background-color: transparent;
color: $menu-button-ios-color;
font-size: 17px;
line-height: 1;
overflow: visible;
z-index: $menu-button-ios-button-z-index;
&.activated {
opacity: .4;
:host {
--ion-color-base: #{ion-color(primary, base)};
}
button {
padding: 0 5px;
}
ion-icon {
@include padding(0);
@include margin(0, -3px, 0, 0);
display: inherit;
font-size: 1.75em;
pointer-events: none;
font-size: 31px;
}

38
core/src/components/menu-button/menu-button.md.scss
View File

@ -4,40 +4,14 @@
// MD Menu Button
// --------------------------------------------------
.menu-button-inner {
@include margin(2px, 6px, 0, 0);
@include padding(0, 5px);
min-width: 44px;
height: 32px;
border: 0;
background-color: transparent;
color: $menu-button-md-color;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
box-shadow: none;
&.activated {
opacity: .4;
:host {
--ion-color-base: currentColor;
}
button {
padding: 0 8px;
}
ion-icon {
@include padding-horizontal(null, .3em);
@include margin(0);
@include padding(0, 6px);
font-size: 24px;
font-weight: normal;
line-height: .67;
text-align: start;
pointer-events: none;
font-size: 26px;
}

9
core/src/components/menu-button/menu-button.scss
View File

@ -5,6 +5,8 @@
:host {
pointer-events: all;
color: #{current-color(base)};
}
button {
@ -13,6 +15,7 @@ button {
@include font-smoothing();
display: flex;
height: 32px;
position: relative;
flex-flow: row nowrap;
@ -42,3 +45,9 @@ button {
font-kerning: none;
appearance: none;
}
ion-icon {
padding: 0;
margin: 0;
pointer-events: none;
}

25
core/src/components/menu-button/menu-button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Config, Mode } from '../../interface';
import { Color, Config, Mode } from '../../interface';
@Component({
tag: 'ion-menu-button',
@ -11,10 +11,19 @@ import { Config, Mode } from '../../interface';
})
export class MenuButton {
mode!: Mode;
@Prop({ context: 'config' }) config!: Config;
/**
* The color to use for the background of the item.
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* 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
*/
@ -25,13 +34,21 @@ export class MenuButton {
*/
@Prop() autoHide = true;
hostData() {
return {
class: {
'button': true
}
};
}
render() {
const menuIcon = this.config.get('menuIcon', 'menu');
return (
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
<button>
<slot>
<ion-icon icon={menuIcon} slot="icon-only" />
<ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
</slot>
</button>
</ion-menu-toggle>

30
core/src/components/menu-button/readme.md
View File

@ -15,6 +15,13 @@ boolean
Automatically hides the menu button when the corresponding menu is not active
#### color
string
The color to use for the background of the item.
#### menu
string
@ -22,6 +29,14 @@ 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
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
## Attributes
#### auto-hide
@ -31,6 +46,13 @@ boolean
Automatically hides the menu button when the corresponding menu is not active
#### color
string
The color to use for the background of the item.
#### menu
string
@ -38,6 +60,14 @@ 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
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
----------------------------------------------

6
core/src/components/menu-toggle/test/preview/index.html
View File

@ -61,11 +61,7 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Menu Toggle</ion-title>
</ion-toolbar>

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

@ -139,6 +139,9 @@ Emitted when the menu is open.
#### close()
#### getWidth()
#### isActive()

6
core/src/components/split-pane/test/basic/index.html
View File

@ -52,11 +52,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Navigation</ion-title>

6
core/src/components/split-pane/test/preview/index.html
View File

@ -52,11 +52,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Navigation</ion-title>

12
core/src/components/toolbar/test/preview/index.html
View File

@ -88,11 +88,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
@ -110,11 +106,7 @@
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>

12
core/src/components/toolbar/test/scenarios/index.html
View File

@ -177,11 +177,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
@ -199,11 +195,7 @@
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>

14
core/src/components/toolbar/usage/angular.md
View File

@ -75,11 +75,8 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
@ -97,11 +94,8 @@
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>

12
core/src/components/toolbar/usage/javascript.md
View File

@ -75,11 +75,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
@ -97,11 +93,7 @@
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>