javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): add missing button/a props to components that render them (#17883)

Browse Source 
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
2019-06-12 14:06:29 -04:00
committed by GitHub
parent 828eaaf3d3
commit eca4121dc6
36 changed files with 751 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
core/src/components/item-option/item-option.tsx
View File

@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { createColorClasses } from '../../utils/theme';
/**
@ -19,7 +20,7 @@ import { createColorClasses } from '../../utils/theme';
},
shadow: true
})
export class ItemOption implements ComponentInterface {
export class ItemOption implements ComponentInterface, AnchorInterface, ButtonInterface {
@Element() el!: HTMLElement;
@ -40,6 +41,14 @@ export class ItemOption 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;
/**
* If `true`, the option will expand to take up the available width and cover any other options.
*/
@ -49,7 +58,25 @@ export class ItemOption implements ComponentInterface {
* 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;
/**
* 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.
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('click')
onClick(ev: Event) {
@ -75,13 +102,19 @@ export class ItemOption implements ComponentInterface {
render() {
const TagType = this.href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
target: this.target
};
return (
<TagType
type="button"
{...attrs}
class="button-native"
disabled={this.disabled}
href={this.href}
>
<span class="button-inner">
<slot name="top"></slot>

18
core/src/components/item-option/readme.md
View File

@ -9,13 +9,17 @@ action for the item.
## 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` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `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` |
| 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` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `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` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `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` |
| `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` |
| `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'` |
## Slots