javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(item): [tappable] -> [button]

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-29 16:17:16 +02:00
parent 9caeec7fcf
commit 74e4b323ac
5 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components.d.ts vendored
View File

@ -2591,12 +2591,16 @@ declare global {
declare global {
interface HTMLIonItemElement extends HTMLStencilElement {
/**
* Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
*/
'button': boolean;
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
'detail': boolean;
/**
@ -2612,10 +2616,6 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode': 'ios' | 'md';
/**
* Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
*/
'tappable': boolean;
}
var HTMLIonItemElement: {
prototype: HTMLIonItemElement;
@ -2634,12 +2634,16 @@ declare global {
}
namespace JSXElements {
export interface IonItemAttributes extends HTMLAttributes {
/**
* Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
*/
'button'?: boolean;
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
'detail'?: boolean;
/**
@ -2655,10 +2659,6 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode'?: 'ios' | 'md';
/**
* Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
*/
'tappable'?: boolean;
}
}
}

6
core/src/components/item/item.tsx
View File

@ -33,7 +33,7 @@ export class Item {
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
* is `ios` and an `href`, `onclick` or `tappable` property is present.
* is `ios` and an `href`, `onclick` or `button` property is present.
*/
@Prop() detail: boolean;
@ -52,7 +52,7 @@ export class Item {
* Whether or not this item should be tappable.
* If true, a button tag will be rendered. Defaults to `false`.
*/
@Prop() tappable = false;
@Prop() button = false;
@Prop() goBack = false;
@ -99,7 +99,7 @@ export class Item {
childStyles = Object.assign(childStyles, this.itemStyles[key]);
}
const clickable = !!(this.href || this.el.onclick || this.tappable);
const clickable = !!(this.href || this.el.onclick || this.button);
const TagType = clickable
? this.href ? 'a' : 'button'

26
core/src/components/item/readme.md
View File

@ -7,6 +7,14 @@
## Properties
#### button
boolean
Whether or not this item should be tappable.
If true, a button tag will be rendered. Defaults to `false`.
#### color
string
@ -21,7 +29,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
boolean
If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
is `ios` and an `href`, `onclick` or `tappable` property is present.
is `ios` and an `href`, `onclick` or `button` property is present.
#### disabled
@ -53,7 +61,9 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### tappable
## Attributes
#### button
boolean
@ -61,8 +71,6 @@ Whether or not this item should be tappable.
If true, a button tag will be rendered. Defaults to `false`.
## Attributes
#### color
string
@ -77,7 +85,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
boolean
If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
is `ios` and an `href`, `onclick` or `tappable` property is present.
is `ios` and an `href`, `onclick` or `button` property is present.
#### disabled
@ -109,14 +117,6 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### tappable
boolean
Whether or not this item should be tappable.
If true, a button tag will be rendered. Defaults to `false`.
----------------------------------------------

2
core/src/components/item/test/buttons/index.html
View File

@ -28,7 +28,7 @@
<ion-label>a[ion-item] secondary</ion-label>
</ion-item>
<ion-item tappable id="attachClick">
<ion-item button id="attachClick">
<ion-label>button[ion-item]</ion-label>
</ion-item>

4
core/src/components/item/test/standalone/index.html
View File

@ -13,11 +13,11 @@
<ion-label>Item Text</ion-label>
</ion-item>
<ion-item tappable color="danger">
<ion-item button color="danger">
<ion-label>Item Tappable Danger</ion-label>
</ion-item>
<ion-item tappable color="danger" class="activated">
<ion-item button color="danger" class="activated">
<ion-label>Item Tappable Danger.activated</ion-label>
</ion-item>