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

feat(all): add shadow parts to missing components (#21436)

Browse Source
This commit is contained in:
Brandy Carney
2020-06-10 09:58:33 -04:00
committed by GitHub
parent df408f91f1
commit 17375d2325
26 changed files with 162 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,12 @@ import { menuController } from '../../utils/menu-controller';
import { createColorClasses, hostContext } from '../../utils/theme';
import { updateVisibility } from '../menu-toggle/menu-toggle-util';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part native - The native HTML button element that wraps all child elements.
* @part icon - The menu button icon (uses ion-icon).
*/
@Component({
tag: 'ion-menu-button',
styleUrls: {
@ -95,11 +101,12 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
{...attrs}
disabled={disabled}
class="button-native"
part="native"
aria-label="menu"
>
<span class="button-inner">
<slot>
<ion-icon icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
<ion-icon part="icon" icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
</slot>
</span>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}

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

@ -14,9 +14,18 @@ Menu Button is component that automatically creates the icon and functionality t
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the menu button. | `boolean` | `false` |
| `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 | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Shadow Parts
| Part | Description |
| ---------- | ------------------------------------------------------------- |
| `"icon"` | The menu button icon (uses ion-icon). |
| `"native"` | The native HTML button element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |