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
@ -1,6 +1,7 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
|
||||
|
||||
import { Color, Mode, RouterDirection } from '../../interface';
|
||||
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
|
||||
import { hasShadowDom } from '../../utils/helpers';
|
||||
import { createColorClasses, openURL } from '../../utils/theme';
|
||||
|
||||
@ -18,7 +19,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
|
||||
},
|
||||
shadow: true,
|
||||
})
|
||||
export class Button implements ComponentInterface {
|
||||
export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
|
||||
|
||||
private inToolbar = false;
|
||||
private inItem = false;
|
||||
@ -68,11 +69,25 @@ export class Button implements ComponentInterface {
|
||||
*/
|
||||
@Prop() routerDirection: RouterDirection = 'forward';
|
||||
|
||||
/**
|
||||
* This attribute instructs browsers to download a URL instead of navigating to
|
||||
* it, so the user will be prompted to save it as a local file. If the attribute
|
||||
* has a value, it is used as the pre-filled file name in the Save prompt
|
||||
* (the user can still change the file name if they want).
|
||||
*/
|
||||
@Prop() download: string | undefined;
|
||||
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to.
|
||||
* If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
@Prop() href?: string;
|
||||
@Prop() href: string | undefined;
|
||||
|
||||
/**
|
||||
* Specifies the relationship of the target object to the link object.
|
||||
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
|
||||
*/
|
||||
@Prop() rel: string | undefined;
|
||||
|
||||
/**
|
||||
* The button shape.
|
||||
@ -89,6 +104,13 @@ export class Button implements ComponentInterface {
|
||||
*/
|
||||
@Prop() strong = false;
|
||||
|
||||
/**
|
||||
* Specifies where to display the linked URL.
|
||||
* Only applies when an `href` is provided.
|
||||
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||
*/
|
||||
@Prop() target: string | undefined;
|
||||
|
||||
/**
|
||||
* The type of the button.
|
||||
*/
|
||||
@ -187,7 +209,12 @@ export class Button implements ComponentInterface {
|
||||
const TagType = this.href === undefined ? 'button' : 'a' as any;
|
||||
const attrs = (TagType === 'button')
|
||||
? { type: this.type }
|
||||
: { href: this.href };
|
||||
: {
|
||||
download: this.download,
|
||||
href: this.href,
|
||||
rel: this.rel,
|
||||
target: this.target
|
||||
};
|
||||
|
||||
return (
|
||||
<TagType
|
||||
|
||||
@ -214,20 +214,23 @@ export default Example;
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
|
||||
| `buttonType` | `button-type` | The type of button. | `string` | `'button'` |
|
||||
| `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 button. | `boolean` | `false` |
|
||||
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` |
|
||||
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` |
|
||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
|
||||
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |
|
||||
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
|
||||
| `buttonType` | `button-type` | The type of button. | `string` | `'button'` |
|
||||
| `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 button. | `boolean` | `false` |
|
||||
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
|
||||
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` |
|
||||
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` |
|
||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
|
||||
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |
|
||||
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` |
|
||||
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
Reference in New Issue
Block a user