mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +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
@ -107,6 +107,11 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.back-button-disabled) {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Native Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
|
||||
|
||||
import { Color, Config, Mode } from '../../interface';
|
||||
import { ButtonInterface } from '../../utils/element-interface';
|
||||
import { createColorClasses, openURL } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
@ -11,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
|
||||
},
|
||||
scoped: true
|
||||
})
|
||||
export class BackButton implements ComponentInterface {
|
||||
export class BackButton implements ComponentInterface, ButtonInterface {
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@ -35,6 +36,11 @@ export class BackButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() defaultHref?: string;
|
||||
|
||||
/**
|
||||
* If `true`, the user cannot interact with the button.
|
||||
*/
|
||||
@Prop({ reflectToAttr: true }) disabled = false;
|
||||
|
||||
/**
|
||||
* The icon name to use for the back button.
|
||||
*/
|
||||
@ -45,6 +51,11 @@ export class BackButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() text?: string | null;
|
||||
|
||||
/**
|
||||
* The type of the button.
|
||||
*/
|
||||
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
|
||||
|
||||
@Listen('click')
|
||||
async onClick(ev: Event) {
|
||||
const nav = this.el.closest('ion-nav');
|
||||
@ -80,15 +91,19 @@ export class BackButton implements ComponentInterface {
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const showBackButton = this.defaultHref !== undefined;
|
||||
const { color, defaultHref, disabled, mode, hasIconOnly } = this;
|
||||
|
||||
const showBackButton = defaultHref !== undefined;
|
||||
|
||||
return {
|
||||
'aria-disabled': disabled ? 'true' : null,
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
[`${this.mode}`]: true,
|
||||
...createColorClasses(color),
|
||||
[`${mode}`]: true,
|
||||
|
||||
'button': true, // ion-buttons target .button
|
||||
'back-button-has-icon-only': this.hasIconOnly,
|
||||
'back-button-disabled': disabled,
|
||||
'back-button-has-icon-only': hasIconOnly,
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true,
|
||||
'show-back-button': showBackButton
|
||||
@ -99,8 +114,12 @@ export class BackButton implements ComponentInterface {
|
||||
render() {
|
||||
const { backButtonIcon, backButtonText } = this;
|
||||
|
||||
const attrs = {
|
||||
type: this.type
|
||||
};
|
||||
|
||||
return (
|
||||
<button type="button" class="button-native">
|
||||
<button {...attrs} disabled={this.disabled} class="button-native">
|
||||
<span class="button-inner">
|
||||
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
|
||||
{backButtonText && <span class="button-text">{backButtonText}</span>}
|
||||
|
||||
@ -239,13 +239,15 @@ export default Example;
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
|
||||
| `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` |
|
||||
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
|
||||
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
|
||||
| `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` |
|
||||
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
|
||||
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button text="Back"></ion-back-button>
|
||||
<ion-back-button icon="add"></ion-back-button>
|
||||
<ion-back-button text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button disabled text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" text="Back"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" icon="add"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button disabled class="ion-focused" text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
|
||||
</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user