javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(): update usage and examples

Browse Source
This commit is contained in:
mhartington
2018-05-30 12:40:43 -04:00
parent 8e164d6036
commit 3cdc696847
43 changed files with 389 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,8 @@ declare global {
namespace JSXElements {} namespace JSXElements {}
interface HTMLStencilElement extends HTMLElement { interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise<this|null>; componentOnReady(): Promise<this>;
componentOnReady(done: (ele?: this) => void): void;
forceUpdate(): void; forceUpdate(): void;
} }
@ -104,8 +105,17 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonActionSheetController { interface IonActionSheetController {
/**
* Create an action sheet overlay with action sheet options.
*/
'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement | null>; 'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement | null>;
/**
* Dismiss the open action sheet overlay.
*/
'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise<void>; 'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise<void>;
/**
* Get the most recently opened action sheet overlay.
*/
'getTop': () => HTMLIonActionSheetElement; 'getTop': () => HTMLIonActionSheetElement;
} }
} }
@ -298,8 +308,17 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonAlertController { interface IonAlertController {
/**
* Create an alert overlay with alert options
*/
'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement | null>; 'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement | null>;
/**
* Dismiss the open alert overlay.
*/
'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise<void>; 'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise<void>;
/**
* Get the most recently opened alert overlay.
*/
'getTop': () => HTMLIonAlertElement; 'getTop': () => HTMLIonAlertElement;
} }
} }
@ -372,11 +391,11 @@ declare global {
'message': string; 'message': string;
'mode': Mode; 'mode': Mode;
/** /**
* Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await alert.onDidDismiss(); ``` * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances. ``` const {data, role} = await alert.onDidDismiss(); ```
*/ */
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>; 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
/** /**
* Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await alert.onWillDismiss(); ``` * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. ``` const {data, role} = await alert.onWillDismiss(); ```
*/ */
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>; 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'overlayId': number; 'overlayId': number;
@ -545,6 +564,9 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonAnimationController { interface IonAnimationController {
/**
* Creates an animation instance
*/
'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>; 'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>;
} }
} }
@ -645,7 +667,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonBackButton { interface IonBackButton {
/** /**
* 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). * The color the button should be.
*/ */
'color': Color; 'color': Color;
/** /**
@ -657,7 +679,7 @@ declare global {
*/ */
'icon': string; 'icon': string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode': Mode; 'mode': Mode;
/** /**
@ -687,7 +709,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonBackButtonAttributes extends HTMLAttributes { export interface IonBackButtonAttributes extends HTMLAttributes {
/** /**
* 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). * The color the button should be.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -699,7 +721,7 @@ declare global {
*/ */
'icon'?: string; 'icon'?: string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode'?: Mode; 'mode'?: Mode;
/** /**
@ -775,11 +797,11 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonBadge { interface IonBadge {
/** /**
* 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). * The color the badge should be
*/ */
'color': Color; 'color': Color;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode': Mode; 'mode': Mode;
} }
@ -805,11 +827,11 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonBadgeAttributes extends HTMLAttributes { export interface IonBadgeAttributes extends HTMLAttributes {
/** /**
* 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). * The color the badge should be
*/ */
'color'?: Color; 'color'?: Color;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode'?: Mode; 'mode'?: Mode;
} }
@ -826,7 +848,7 @@ declare global {
*/ */
'buttonType': string; 'buttonType': string;
/** /**
* 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). * The color to use for the button.
*/ */
'color': Color; 'color': Color;
/** /**
@ -846,7 +868,7 @@ declare global {
*/ */
'href': string; 'href': string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode': Mode; 'mode': Mode;
/** /**
@ -896,7 +918,7 @@ declare global {
*/ */
'buttonType'?: string; 'buttonType'?: string;
/** /**
* 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). * The color to use for the button.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -916,7 +938,7 @@ declare global {
*/ */
'href'?: string; 'href'?: string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode'?: Mode; 'mode'?: Mode;
/** /**
@ -990,7 +1012,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonCardContent { interface IonCardContent {
/** /**
* The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1020,7 +1042,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonCardContentAttributes extends HTMLAttributes { export interface IonCardContentAttributes extends HTMLAttributes {
/** /**
* The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1037,7 +1059,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonCardHeader { interface IonCardHeader {
/** /**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the background.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1071,7 +1093,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonCardHeaderAttributes extends HTMLAttributes { export interface IonCardHeaderAttributes extends HTMLAttributes {
/** /**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the background.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1092,7 +1114,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonCardSubtitle { interface IonCardSubtitle {
/** /**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text color.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1122,7 +1144,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonCardSubtitleAttributes extends HTMLAttributes { export interface IonCardSubtitleAttributes extends HTMLAttributes {
/** /**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text color.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1139,7 +1161,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonCardTitle { interface IonCardTitle {
/** /**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text color.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1169,7 +1191,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonCardTitleAttributes extends HTMLAttributes { export interface IonCardTitleAttributes extends HTMLAttributes {
/** /**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the text color.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1237,7 +1259,7 @@ declare global {
*/ */
'checked': boolean; 'checked': boolean;
/** /**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the checkbox.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1253,7 +1275,7 @@ declare global {
*/ */
'name': string; 'name': string;
/** /**
* the value of the checkbox. * The value of the checkbox.
*/ */
'value': string; 'value': string;
} }
@ -1283,7 +1305,7 @@ declare global {
*/ */
'checked'?: boolean; 'checked'?: boolean;
/** /**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use for the checkbox.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1315,7 +1337,7 @@ declare global {
*/ */
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void; 'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/** /**
* the value of the checkbox. * The value of the checkbox.
*/ */
'value'?: string; 'value'?: string;
} }
@ -1399,7 +1421,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonChip { interface IonChip {
/** /**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1429,7 +1451,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonChipAttributes extends HTMLAttributes { export interface IonChipAttributes extends HTMLAttributes {
/** /**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * The color to use.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1735,7 +1757,7 @@ declare global {
*/ */
'activated': boolean; 'activated': 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). * The color to use for the button.
*/ */
'color': Color; 'color': Color;
/** /**
@ -1747,7 +1769,7 @@ declare global {
*/ */
'href': string; 'href': string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode': Mode; 'mode': Mode;
'show': boolean; 'show': boolean;
@ -1782,7 +1804,7 @@ declare global {
*/ */
'activated'?: boolean; 'activated'?: 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). * The color to use for the button.
*/ */
'color'?: Color; 'color'?: Color;
/** /**
@ -1794,7 +1816,7 @@ declare global {
*/ */
'href'?: string; 'href'?: string;
/** /**
* 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). * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
'mode'?: Mode; 'mode'?: Mode;
'show'?: boolean; 'show'?: boolean;

6
core/src/components/action-sheet-controller/action-sheet-controller.tsx
View File

@ -27,7 +27,7 @@ export class ActionSheetController implements OverlayController {
removeLastOverlay(this.actionSheets); removeLastOverlay(this.actionSheets);
} }
/* /**
* Create an action sheet overlay with action sheet options. * Create an action sheet overlay with action sheet options.
*/ */
@Method() @Method()
@ -35,7 +35,7 @@ export class ActionSheetController implements OverlayController {
return createOverlay(this.doc.createElement('ion-action-sheet'), opts); return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
} }
/* /**
* Dismiss the open action sheet overlay. * Dismiss the open action sheet overlay.
*/ */
@Method() @Method()
@ -43,7 +43,7 @@ export class ActionSheetController implements OverlayController {
return dismissOverlay(data, role, this.actionSheets, actionSheetId); return dismissOverlay(data, role, this.actionSheets, actionSheetId);
} }
/* /**
* Get the most recently opened action sheet overlay. * Get the most recently opened action sheet overlay.
*/ */
@Method() @Method()

52
core/src/components/action-sheet-controller/readme.md
View File

@ -2,52 +2,6 @@
Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. View the [Action Sheet](../../action-sheet/ActionSheet) documentation for a full list of options to pass upon creation. Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. View the [Action Sheet](../../action-sheet/ActionSheet) documentation for a full list of options to pass upon creation.
```javascript
async function presentBasic() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheetElement.present();
}
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -55,12 +9,18 @@ async function presentBasic() {
#### create() #### create()
Create an action sheet overlay with action sheet options.
#### dismiss() #### dismiss()
Dismiss the open action sheet overlay.
#### getTop() #### getTop()
Get the most recently opened action sheet overlay.
---------------------------------------------- ----------------------------------------------

8
core/src/components/alert-controller/alert-controller.tsx
View File

@ -27,15 +27,15 @@ export class AlertController implements OverlayController {
removeLastOverlay(this.alerts); removeLastOverlay(this.alerts);
} }
/* /**
* Create an alert overlay with alert options. * Create an alert overlay with alert options
*/ */
@Method() @Method()
create(opts?: AlertOptions): Promise<HTMLIonAlertElement | null> { create(opts?: AlertOptions): Promise<HTMLIonAlertElement | null> {
return createOverlay(this.doc.createElement('ion-alert'), opts); return createOverlay(this.doc.createElement('ion-alert'), opts);
} }
/* /**
* Dismiss the open alert overlay. * Dismiss the open alert overlay.
*/ */
@Method() @Method()
@ -43,7 +43,7 @@ export class AlertController implements OverlayController {
return dismissOverlay(data, role, this.alerts, alertId); return dismissOverlay(data, role, this.alerts, alertId);
} }
/* /**
* Get the most recently opened alert overlay. * Get the most recently opened alert overlay.
*/ */
@Method() @Method()

6
core/src/components/alert-controller/readme.md
View File

@ -26,12 +26,18 @@ async function presentAlert() {
#### create() #### create()
Create an alert overlay with alert options
#### dismiss() #### dismiss()
Dismiss the open alert overlay.
#### getTop() #### getTop()
Get the most recently opened alert overlay.
---------------------------------------------- ----------------------------------------------

4
core/src/components/alert/alert.tsx
View File

@ -193,7 +193,7 @@ export class Alert implements OverlayInterface {
/** /**
* Returns a promise that resolves when the alert did dismiss. It also accepts a callback * Returns a promise that resolves when the alert did dismiss. It also accepts a callback
* that is called in the same circustances. * that is called in the same circumstances.
* *
* ``` * ```
* const {data, role} = await alert.onDidDismiss(); * const {data, role} = await alert.onDidDismiss();
@ -206,7 +206,7 @@ export class Alert implements OverlayInterface {
/** /**
* Returns a promise that resolves when the alert will dismiss. It also accepts a callback * Returns a promise that resolves when the alert will dismiss. It also accepts a callback
* that is called in the same circustances. * that is called in the same circumstances.
* *
* ``` * ```
* const {data, role} = await alert.onWillDismiss(); * const {data, role} = await alert.onWillDismiss();

4
core/src/components/alert/readme.md
View File

@ -255,7 +255,7 @@ Dismiss the alert overlay after it has been presented.
#### onDidDismiss() #### onDidDismiss()
Returns a promise that resolves when the alert did dismiss. It also accepts a callback Returns a promise that resolves when the alert did dismiss. It also accepts a callback
that is called in the same circustances. that is called in the same circumstances.
``` ```
const {data, role} = await alert.onDidDismiss(); const {data, role} = await alert.onDidDismiss();
@ -265,7 +265,7 @@ const {data, role} = await alert.onDidDismiss();
#### onWillDismiss() #### onWillDismiss()
Returns a promise that resolves when the alert will dismiss. It also accepts a callback Returns a promise that resolves when the alert will dismiss. It also accepts a callback
that is called in the same circustances. that is called in the same circumstances.
``` ```
const {data, role} = await alert.onWillDismiss(); const {data, role} = await alert.onWillDismiss();

3
core/src/components/animation-controller/animation-controller.tsx
View File

@ -8,6 +8,9 @@ import { Animator } from './animator';
}) })
export class AnimationControllerImpl implements AnimationController { export class AnimationControllerImpl implements AnimationController {
/**
* Creates an animation instance
*/
@Method() @Method()
create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> { create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> {
if (animationBuilder) { if (animationBuilder) {

4
core/src/components/animation-controller/readme.md
View File

@ -1,5 +1,7 @@
# ion-animation-controller # ion-animation-controller
Internal to `ionic/core`.
Used to create an animation instance.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -9,6 +11,8 @@
#### create() #### create()
Creates an animation instance
---------------------------------------------- ----------------------------------------------

6
core/src/components/avatar/usage/angular.md
View File

@ -1,18 +1,18 @@
```html ```html
<ion-avatar> <ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"> <img [src]="user.img">
</ion-avatar> </ion-avatar>
<ion-chip> <ion-chip>
<ion-avatar> <ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"> <img [src]="user.img">
</ion-avatar> </ion-avatar>
<ion-label>Chip Avatar</ion-label> <ion-label>Chip Avatar</ion-label>
</ion-chip> </ion-chip>
<ion-item> <ion-item>
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"> <img [src]="user.img">
</ion-avatar> </ion-avatar>
<ion-label>Item Avatar</ion-label> <ion-label>Item Avatar</ion-label>
</ion-item> </ion-item>

5
core/src/components/back-button/back-button.tsx
View File

@ -20,16 +20,13 @@ export class BackButton {
@Prop({ context: 'window' }) win!: Window; @Prop({ context: 'window' }) win!: Window;
/** /**
* The color to use from your Sass `$colors` map. * The color the button should be.
* 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).
*/ */
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode!: Mode; @Prop() mode!: Mode;

10
core/src/components/back-button/readme.md
View File

@ -14,9 +14,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
string string
The color to use from your Sass `$colors` map. The color the button should be.
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).
#### defaultHref #### defaultHref
@ -39,7 +37,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### text #### text
@ -55,9 +52,7 @@ The text to display in the back button.
string string
The color to use from your Sass `$colors` map. The color the button should be.
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).
#### default-href #### default-href
@ -80,7 +75,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### text #### text

5
core/src/components/back-button/usage/angular.md
View File

@ -21,7 +21,10 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button text="Volver" icon="close"></ion-back-button> <ion-back-button
[text]="buttonText"
[icon]="buttonIcon">
</ion-back-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>

6
core/src/components/backdrop/usage/angular.md
View File

@ -12,7 +12,11 @@
<ion-backdrop stopPropagation="false"></ion-backdrop> <ion-backdrop stopPropagation="false"></ion-backdrop>
<!-- Backdrop that sets dynamic properties --> <!-- Backdrop that sets dynamic properties -->
<ion-backdrop [tappable]="enableBackdropDismiss" [visible]="showBackdrop" [stopPropagation]="shouldPropagate"></ion-backdrop> <ion-backdrop
[tappable]="enableBackdropDismiss"
[visible]="showBackdrop"
[stopPropagation]="shouldPropagate">
</ion-backdrop>
``` ```
```typescript ```typescript

8
core/src/components/badge/badge.tsx
View File

@ -1,7 +1,6 @@
import { Component, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface'; import { Color, Mode } from '../../interface';
@Component({ @Component({
tag: 'ion-badge', tag: 'ion-badge',
styleUrls: { styleUrls: {
@ -13,19 +12,14 @@ import { Color, Mode } from '../../interface';
} }
}) })
export class Badge { export class Badge {
/** /**
* The color to use from your Sass `$colors` map. * The color the badge should be
* 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).
*/ */
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode!: Mode; @Prop() mode!: Mode;
} }

10
core/src/components/badge/readme.md
View File

@ -12,9 +12,7 @@ Badges are inline block elements that usually appear near another element. Typic
string string
The color to use from your Sass `$colors` map. The color the badge should be
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).
#### mode #### mode
@ -23,7 +21,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
## Attributes ## Attributes
@ -32,9 +29,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color the badge should be
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).
#### mode #### mode
@ -43,7 +38,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).

5
core/src/components/button/button.tsx
View File

@ -18,16 +18,13 @@ export class Button {
@State() keyFocus = false; @State() keyFocus = false;
/** /**
* The color to use from your Sass `$colors` map. * The color to use for the button.
* 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).
*/ */
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode!: Mode; @Prop() mode!: Mode;

10
core/src/components/button/readme.md
View File

@ -49,9 +49,7 @@ Possible values are: `"button"`, `"bar-button"`.
string string
The color to use from your Sass `$colors` map. The color to use for the button.
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).
#### disabled #### disabled
@ -92,7 +90,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### routerDirection #### routerDirection
@ -149,9 +146,7 @@ Possible values are: `"button"`, `"bar-button"`.
string string
The color to use from your Sass `$colors` map. The color to use for the button.
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).
#### disabled #### disabled
@ -192,7 +187,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### router-direction #### router-direction

2
core/src/components/card-content/card-content.tsx
View File

@ -14,7 +14,6 @@ import { Color, Mode } from '../../interface';
export class CardContent { export class CardContent {
/** /**
* The color to use for the text. * The color to use for the text.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;
@ -23,5 +22,4 @@ export class CardContent {
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
*/ */
@Prop() mode!: Mode; @Prop() mode!: Mode;
} }

2
core/src/components/card-content/readme.md
View File

@ -14,7 +14,6 @@ It is recommended that any text content for a card should be placed in an `ion-c
string string
The color to use for the text. The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -32,7 +31,6 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text. The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

6
core/src/components/card-header/card-header.tsx
View File

@ -16,7 +16,6 @@ import { createThemedClasses } from '../../utils/theme';
export class CardHeader { export class CardHeader {
/** /**
* The color to use for the background. * The color to use for the background.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;
@ -32,7 +31,9 @@ export class CardHeader {
@Prop() translucent = false; @Prop() translucent = false;
hostData() { hostData() {
const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'card-header-translucent') : {}; const themedClasses = this.translucent
? createThemedClasses(this.mode, this.color, 'card-header-translucent')
: {};
const hostClasses = { const hostClasses = {
...themedClasses ...themedClasses
@ -42,5 +43,4 @@ export class CardHeader {
class: hostClasses class: hostClasses
}; };
} }
} }

2
core/src/components/card-header/readme.md
View File

@ -12,7 +12,6 @@
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -37,7 +36,6 @@ If true, the card header will be translucent. Defaults to `false`.
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

7
core/src/components/card-subtitle/card-subtitle.tsx
View File

@ -1,7 +1,6 @@
import { Component, Prop} from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface'; import { Color, Mode } from '../../interface';
@Component({ @Component({
tag: 'ion-card-subtitle', tag: 'ion-card-subtitle',
styleUrls: { styleUrls: {
@ -15,7 +14,6 @@ import { Color, Mode } from '../../interface';
export class CardSubtitle { export class CardSubtitle {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;
@ -27,9 +25,8 @@ export class CardSubtitle {
hostData() { hostData() {
return { return {
'role': 'heading', role: 'heading',
'aria-level': '3' 'aria-level': '3'
}; };
} }
} }

2
core/src/components/card-subtitle/readme.md
View File

@ -12,7 +12,6 @@
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -30,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

8
core/src/components/card-title/card-title.tsx
View File

@ -1,7 +1,6 @@
import { Component, Prop} from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface'; import { Color, Mode } from '../../interface';
@Component({ @Component({
tag: 'ion-card-title', tag: 'ion-card-title',
styleUrls: { styleUrls: {
@ -13,10 +12,8 @@ import { Color, Mode } from '../../interface';
} }
}) })
export class CardTitle { export class CardTitle {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;
@ -28,9 +25,8 @@ export class CardTitle {
hostData() { hostData() {
return { return {
'role': 'heading', role: 'heading',
'aria-level': '2' 'aria-level': '2'
}; };
} }
} }

2
core/src/components/card-title/readme.md
View File

@ -13,7 +13,6 @@
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -31,7 +30,6 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

6
core/src/components/card/test/basic/index.html
View File

@ -25,8 +25,7 @@
</ion-card-header> </ion-card-header>
<ion-card-content> <ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile, Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
@ -38,8 +37,7 @@
</ion-item> </ion-item>
<ion-card-content> <ion-card-content>
This is content, without any paragraph or header tags, This is content, without any paragraph or header tags, within an ion-card-content element.
within an ion-card-content element.
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>

11
core/src/components/card/usage/javascript.md Normal file
View File

@ -0,0 +1,11 @@
```html
<ion-card>
<ion-card-header>
<ion-card-title>Hello There</ion-card-title>
<ion-card-subtitle>Some subtext</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<h1>General Kenobi</h1>
</ion-card-content>
</ion-card>
```

5
core/src/components/checkbox/checkbox.tsx
View File

@ -23,8 +23,7 @@ export class Checkbox implements CheckboxInput {
@State() keyFocus = false; @State() keyFocus = false;
/** /**
* The color to use. * The color to use for the checkbox.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;
@ -50,7 +49,7 @@ export class Checkbox implements CheckboxInput {
@Prop() disabled = false; @Prop() disabled = false;
/** /**
* the value of the checkbox. * The value of the checkbox.
*/ */
@Prop() value = 'on'; @Prop() value = 'on';

45
core/src/components/checkbox/readme.md
View File

@ -3,41 +3,6 @@
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox -->
<ion-checkbox disabled></ion-checkbox>
<!-- Checked Checkbox -->
<ion-checkbox checked></ion-checkbox>
<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List -->
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
</ion-item>
</ion-list>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -56,8 +21,7 @@ If true, the checkbox is selected. Defaults to `false`.
string string
The color to use. The color to use for the checkbox.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -86,7 +50,7 @@ The name of the control, which is submitted with the form data.
string string
the value of the checkbox. The value of the checkbox.
## Attributes ## Attributes
@ -102,8 +66,7 @@ If true, the checkbox is selected. Defaults to `false`.
string string
The color to use. The color to use for the checkbox.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -132,7 +95,7 @@ The name of the control, which is submitted with the form data.
string string
the value of the checkbox. The value of the checkbox.
## Events ## Events

42
core/src/components/checkbox/usage/angular.md Normal file
View File

@ -0,0 +1,42 @@
```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox -->
<ion-checkbox disabled="true"></ion-checkbox>
<!-- Checked Checkbox -->
<ion-checkbox checked="true"></ion-checkbox>
<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List -->
<ion-list>
<ion-item *ngFor="let entry of form">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
</ion-item>
</ion-list>
```
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
public form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
}
```

35
core/src/components/checkbox/usage/javascript.md Normal file
View File

@ -0,0 +1,35 @@
```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox -->
<ion-checkbox disabled></ion-checkbox>
<!-- Checked Checkbox -->
<ion-checkbox checked></ion-checkbox>
<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List -->
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
</ion-item>
</ion-list>
```

31
core/src/components/chip-button/readme.md
View File

@ -1,38 +1,7 @@
# ion-chip-button # ion-chip-button
A chip-button is an inset button that is placed inside of a chip. A chip-button is an inset button that is placed inside of a chip.
```html
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-chip-button fill="clear" color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

26
core/src/components/chip-button/usage/javascript.md Normal file
View File

@ -0,0 +1,26 @@
```html
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-chip-button fill="clear" color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```

1
core/src/components/chip/chip.tsx
View File

@ -15,7 +15,6 @@ import { Color, Mode } from '../../interface';
export class Chip { export class Chip {
/** /**
* The color to use. * The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color?: Color; @Prop() color?: Color;

53
core/src/components/chip/readme.md
View File

@ -2,57 +2,6 @@
Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, buttons, and icons. Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, buttons, and icons.
```html
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="heart" color="dark"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-chip-button fill="clear" color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -63,7 +12,6 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -81,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

48
core/src/components/chip/usage/javascript.md Normal file
View File

@ -0,0 +1,48 @@
```html
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="heart" color="dark"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-chip-button fill="clear" color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```

7
core/src/components/content/readme.md
View File

@ -4,13 +4,6 @@ Content component provides an easy to use content area with some useful methods
to control the scrollable area. There should only be one content in a single to control the scrollable area. There should only be one content in a single
view component. view component.
```html
<ion-content>
Add your content here!
</ion-content>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

9
core/src/components/content/usage/angular.md Normal file
View File

@ -0,0 +1,9 @@
```html
<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
</ion-content>
```

11
core/src/components/content/usage/javascript.md Normal file
View File

@ -0,0 +1,11 @@
```html
<ion-content></ion-content>
```
```javascript
var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
```

37
core/src/components/fab-button/fab-button.tsx
View File

@ -2,7 +2,6 @@ import { Component, Element, Prop } from '@stencil/core';
import { Color, CssClassMap, Mode } from '../../interface'; import { Color, CssClassMap, Mode } from '../../interface';
import { createThemedClasses, getElementClassMap } from '../../utils/theme'; import { createThemedClasses, getElementClassMap } from '../../utils/theme';
@Component({ @Component({
tag: 'ion-fab-button', tag: 'ion-fab-button',
styleUrls: { styleUrls: {
@ -11,22 +10,18 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
} }
}) })
export class FabButton { export class FabButton {
private inList = false; private inList = false;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
/** /**
* The color to use from your Sass `$colors` map. * The color to use for the button.
* 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).
*/ */
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode!: Mode; @Prop() mode!: Mode;
@ -57,7 +52,7 @@ export class FabButton {
const parentNode = this.el.parentNode; const parentNode = this.el.parentNode;
const parentTag = parentNode ? parentNode.nodeName : null; const parentTag = parentNode ? parentNode.nodeName : null;
this.inList = (parentTag === 'ION-FAB-LIST'); this.inList = parentTag === 'ION-FAB-LIST';
} }
/** /**
@ -67,34 +62,38 @@ export class FabButton {
return { return {
'fab-button-in-list': this.inList, 'fab-button-in-list': this.inList,
[`fab-button-${this.mode}-in-list`]: this.inList, [`fab-button-${this.mode}-in-list`]: this.inList,
[`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent), [`fab-button-translucent-${this.mode}-in-list`]:
this.inList && this.translucent,
'fab-button-close-active': this.activated, 'fab-button-close-active': this.activated,
'fab-button-show': this.show, 'fab-button-show': this.show
}; };
} }
render() { render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button'); const themedClasses = createThemedClasses(
const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {}; this.mode,
this.color,
'fab-button'
);
const translucentClasses = this.translucent
? createThemedClasses(this.mode, this.color, 'fab-button-translucent')
: {};
const hostClasses = getElementClassMap(this.el.classList); const hostClasses = getElementClassMap(this.el.classList);
const TagType = this.href ? 'a' : 'button'; const TagType = this.href ? 'a' : 'button';
const fabClasses = { const fabClasses = {
...this.getFabClassMap(), ...this.getFabClassMap(),
...themedClasses, ...themedClasses,
...translucentClasses, ...translucentClasses,
...hostClasses, ...hostClasses
}; };
return ( return (
<TagType <TagType class={fabClasses} disabled={this.disabled} href={this.href}>
class={fabClasses} <ion-icon name="close" class="fab-button-close-icon" />
disabled={this.disabled}
href={this.href}>
<ion-icon name="close" class="fab-button-close-icon"></ion-icon>
<span class="fab-button-inner"> <span class="fab-button-inner">
<slot></slot> <slot />
</span> </span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } {this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
</TagType> </TagType>
); );
} }

41
core/src/components/fab-button/readme.md
View File

@ -1,38 +1,9 @@
# ion-fab-button # ion-fab-button
Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content: Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.
```html
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
<!-- Default Floating Action Button that scrolls with the content.-->
<ion-fab-button>Button</ion-fab-button>
</ion-content>
```
If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors: If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
```html
<ion-content>
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -49,9 +20,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use for the button.
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).
#### disabled #### disabled
@ -75,7 +44,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### show #### show
@ -103,9 +71,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use for the button.
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).
#### disabled #### disabled
@ -129,7 +95,6 @@ string
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### show #### show

23
core/src/components/fab-button/usage/javascript.md Normal file
View File

@ -0,0 +1,23 @@
```html
<ion-content>
<!-- Fixed Floating Action Button that does not scroll with the content -->
<ion-fab>
<ion-fab-button>Button</ion-fab-button>
</ion-fab>
<!-- Default Floating Action Button that scrolls with the content.-->
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>
```