mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +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, Prop } from '@stencil/core';
|
||||
|
||||
import { Color, Mode, RouterDirection } from '../../interface';
|
||||
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
|
||||
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
@ -11,7 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
|
||||
},
|
||||
shadow: true
|
||||
})
|
||||
export class FabButton implements ComponentInterface {
|
||||
export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@Prop({ context: 'window' }) win!: Window;
|
||||
@ -38,11 +39,25 @@ export class FabButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* When using a router, it specifies the transition direction when navigating to
|
||||
@ -50,6 +65,13 @@ export class FabButton implements ComponentInterface {
|
||||
*/
|
||||
@Prop() routerDirection: RouterDirection = 'forward';
|
||||
|
||||
/**
|
||||
* Specifies where to display the linked URL.
|
||||
* Only applies when an `href` is provided.
|
||||
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||
*/
|
||||
@Prop() target: string | undefined;
|
||||
|
||||
/**
|
||||
* If `true`, the fab button will show when in a fab-list.
|
||||
*/
|
||||
@ -113,7 +135,12 @@ export class FabButton 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
|
||||
|
||||
@ -101,18 +101,21 @@ export default Example
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
|
||||
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
|
||||
| `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 fab button. | `boolean` | `false` |
|
||||
| `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'` |
|
||||
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
|
||||
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
|
||||
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
|
||||
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
|
||||
| `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 fab 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` |
|
||||
| `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'` |
|
||||
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
|
||||
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
|
||||
| `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` |
|
||||
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
Reference in New Issue
Block a user