mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
feat(components): add missing button/a props to components that render them (#17883)
Adds the following properties to the components listed under them: `rel`, `download`, `target`: - anchor - button - card - fab-button - item-option - item - tab-button `disabled`: - back-button - menu-button `type`: - back-button - item-option - menu-button - segment-button fixes #16848 closes #16889 Co-authored-by: bitflower <matthias.max@bitflower.net>
This commit is contained in:
Brandy Carney
@ -77,6 +77,15 @@ ion-icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Menu Button: Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.menu-button-disabled) {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Menu Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, ComponentInterface, Prop } from '@stencil/core';
|
||||
|
||||
import { Color, Config, Mode } from '../../interface';
|
||||
import { ButtonInterface } from '../../utils/element-interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
@ -11,7 +12,7 @@ import { createColorClasses } from '../../utils/theme';
|
||||
},
|
||||
shadow: true
|
||||
})
|
||||
export class MenuButton implements ComponentInterface {
|
||||
export class MenuButton implements ComponentInterface, ButtonInterface {
|
||||
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
|
||||
@ -27,6 +28,11 @@ export class MenuButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* If `true`, the user cannot interact with the menu button.
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
@ -37,14 +43,23 @@ export class MenuButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() autoHide = true;
|
||||
|
||||
/**
|
||||
* The type of the button.
|
||||
*/
|
||||
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
|
||||
|
||||
hostData() {
|
||||
const { color, disabled } = this;
|
||||
|
||||
return {
|
||||
'aria-disabled': disabled ? 'true' : null,
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
...createColorClasses(color),
|
||||
|
||||
[`${this.mode}`]: true,
|
||||
|
||||
'button': true, // ion-buttons target .button
|
||||
'menu-button-disabled': disabled,
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true
|
||||
}
|
||||
@ -53,11 +68,20 @@ export class MenuButton implements ComponentInterface {
|
||||
|
||||
render() {
|
||||
const menuIcon = this.config.get('menuIcon', 'menu');
|
||||
|
||||
const attrs = {
|
||||
type: this.type
|
||||
};
|
||||
|
||||
return (
|
||||
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
|
||||
<button type="button" class="button-native">
|
||||
<button
|
||||
{...attrs}
|
||||
disabled={this.disabled}
|
||||
class="button-native"
|
||||
>
|
||||
<slot>
|
||||
<ion-icon icon={menuIcon} mode={this.mode} lazy={false} />
|
||||
<ion-icon icon={menuIcon} mode={this.mode} lazy={false}></ion-icon>
|
||||
</slot>
|
||||
{this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
|
||||
</button>
|
||||
|
||||
@ -8,12 +8,14 @@ Menu Button is component that automatically creates the icon and functionality t
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
|
||||
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` |
|
||||
| `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` |
|
||||
| `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` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
|
||||
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` |
|
||||
| `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'` |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
@ -17,7 +17,9 @@
|
||||
<ion-content>
|
||||
<h1>Default</h1>
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
<ion-menu-button disabled auto-hide="false"></ion-menu-button>
|
||||
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
||||
<ion-menu-button disabled auto-hide="false" class="ion-focused"></ion-menu-button>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-menu-button auto-hide="false" class="custom"></ion-menu-button>
|
||||
|
||||
Reference in New Issue
Block a user