javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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 {}
interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise<this|null>;
componentOnReady(): Promise<this>;
componentOnReady(done: (ele?: this) => void): void;
forceUpdate(): void;
}
@ -104,8 +105,17 @@ declare global {
namespace StencilComponents {
interface IonActionSheetController {
/**
* Create an action sheet overlay with action sheet options.
*/
'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement | null>;
/**
* Dismiss the open action sheet overlay.
*/
'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise<void>;
/**
* Get the most recently opened action sheet overlay.
*/
'getTop': () => HTMLIonActionSheetElement;
}
}
@ -298,8 +308,17 @@ declare global {
namespace StencilComponents {
interface IonAlertController {
/**
* Create an alert overlay with alert options
*/
'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement | null>;
/**
* Dismiss the open alert overlay.
*/
'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise<void>;
/**
* Get the most recently opened alert overlay.
*/
'getTop': () => HTMLIonAlertElement;
}
}
@ -372,11 +391,11 @@ declare global {
'message': string;
'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>;
/**
* 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>;
'overlayId': number;
@ -545,6 +564,9 @@ declare global {
namespace StencilComponents {
interface IonAnimationController {
/**
* Creates an animation instance
*/
'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>;
}
}
@ -645,7 +667,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -657,7 +679,7 @@ declare global {
*/
'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;
/**
@ -687,7 +709,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -699,7 +721,7 @@ declare global {
*/
'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;
/**
@ -775,11 +797,11 @@ declare global {
namespace StencilComponents {
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;
/**
* 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;
}
@ -805,11 +827,11 @@ declare global {
namespace JSXElements {
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;
/**
* 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;
}
@ -826,7 +848,7 @@ declare global {
*/
'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;
/**
@ -846,7 +868,7 @@ declare global {
*/
'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;
/**
@ -896,7 +918,7 @@ declare global {
*/
'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;
/**
@ -916,7 +938,7 @@ declare global {
*/
'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;
/**
@ -990,7 +1012,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -1020,7 +1042,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -1037,7 +1059,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -1071,7 +1093,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -1092,7 +1114,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -1122,7 +1144,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -1139,7 +1161,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -1169,7 +1191,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -1237,7 +1259,7 @@ declare global {
*/
'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;
/**
@ -1253,7 +1275,7 @@ declare global {
*/
'name': string;
/**
* the value of the checkbox.
* The value of the checkbox.
*/
'value': string;
}
@ -1283,7 +1305,7 @@ declare global {
*/
'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;
/**
@ -1315,7 +1337,7 @@ declare global {
*/
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* the value of the checkbox.
* The value of the checkbox.
*/
'value'?: string;
}
@ -1399,7 +1421,7 @@ declare global {
namespace StencilComponents {
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;
/**
@ -1429,7 +1451,7 @@ declare global {
namespace JSXElements {
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;
/**
@ -1735,7 +1757,7 @@ declare global {
*/
'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;
/**
@ -1747,7 +1769,7 @@ declare global {
*/
'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;
'show': boolean;
@ -1782,7 +1804,7 @@ declare global {
*/
'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;
/**
@ -1794,7 +1816,7 @@ declare global {
*/
'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;
'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);
}
/*
/**
* Create an action sheet overlay with action sheet options.
*/
@Method()
@ -35,7 +35,7 @@ export class ActionSheetController implements OverlayController {
return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
}
/*
/**
* Dismiss the open action sheet overlay.
*/
@Method()
@ -43,7 +43,7 @@ export class ActionSheetController implements OverlayController {
return dismissOverlay(data, role, this.actionSheets, actionSheetId);
}
/*
/**
* Get the most recently opened action sheet overlay.
*/
@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.
```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 -->
@ -55,12 +9,18 @@ async function presentBasic() {
#### create()
Create an action sheet overlay with action sheet options.
#### dismiss()
Dismiss the open action sheet overlay.
#### 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);
}
/*
* Create an alert overlay with alert options.
/**
* Create an alert overlay with alert options
*/
@Method()
create(opts?: AlertOptions): Promise<HTMLIonAlertElement | null> {
return createOverlay(this.doc.createElement('ion-alert'), opts);
}
/*
/**
* Dismiss the open alert overlay.
*/
@Method()
@ -43,7 +43,7 @@ export class AlertController implements OverlayController {
return dismissOverlay(data, role, this.alerts, alertId);
}
/*
/**
* Get the most recently opened alert overlay.
*/
@Method()

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

@ -26,12 +26,18 @@ async function presentAlert() {
#### create()
Create an alert overlay with alert options
#### dismiss()
Dismiss the open alert overlay.
#### 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
* that is called in the same circustances.
* that is called in the same circumstances.
*
* ```
* 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
* that is called in the same circustances.
* that is called in the same circumstances.
*
* ```
* 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()
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();
@ -265,7 +265,7 @@ const {data, role} = await alert.onDidDismiss();
#### onWillDismiss()
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();

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

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

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

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

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

@ -1,18 +1,18 @@
```html
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
<img [src]="user.img">
</ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
<img [src]="user.img">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
<img [src]="user.img">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</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;
/**
* 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.
*/
@Prop() 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).
*/
@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
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.
#### defaultHref
@ -39,7 +37,6 @@ 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).
#### text
@ -55,9 +52,7 @@ The text to display in the back button.
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 the button should be.
#### default-href
@ -80,7 +75,6 @@ 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).
#### text

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

@ -21,7 +21,10 @@
<ion-header>
<ion-toolbar>
<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-toolbar>
</ion-header>

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

@ -12,7 +12,11 @@
<ion-backdrop stopPropagation="false"></ion-backdrop>
<!-- 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

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

@ -1,7 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
@Component({
tag: 'ion-badge',
styleUrls: {
@ -13,19 +12,14 @@ import { Color, Mode } from '../../interface';
}
})
export class Badge {
/**
* 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
*/
@Prop() 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).
*/
@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
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
#### mode
@ -23,7 +21,6 @@ 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).
## Attributes
@ -32,9 +29,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
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 the badge should be
#### mode
@ -43,7 +38,6 @@ 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).

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

@ -18,16 +18,13 @@ export class Button {
@State() keyFocus = false;
/**
* 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.
*/
@Prop() 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).
*/
@Prop() mode!: Mode;

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

@ -49,9 +49,7 @@ Possible values are: `"button"`, `"bar-button"`.
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.
#### disabled
@ -92,7 +90,6 @@ 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).
#### routerDirection
@ -149,9 +146,7 @@ Possible values are: `"button"`, `"bar-button"`.
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.
#### disabled
@ -192,7 +187,6 @@ 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).
#### 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 {
/**
* The color to use for the text.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color?: Color;
@ -23,5 +22,4 @@ export class CardContent {
* Possible values are: `"ios"` or `"md"`.
*/
@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
The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
@ -32,7 +31,6 @@ Possible values are: `"ios"` or `"md"`.
string
The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode

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

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

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

@ -12,7 +12,6 @@
string
The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
@ -37,7 +36,6 @@ If true, the card header will be translucent. Defaults to `false`.
string
The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### 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';
@Component({
tag: 'ion-card-subtitle',
styleUrls: {
@ -15,7 +14,6 @@ import { Color, Mode } from '../../interface';
export class CardSubtitle {
/**
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color?: Color;
@ -27,9 +25,8 @@ export class CardSubtitle {
hostData() {
return {
'role': 'heading',
role: 'heading',
'aria-level': '3'
};
}
}

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

@ -12,7 +12,6 @@
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
@ -30,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### 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';
@Component({
tag: 'ion-card-title',
styleUrls: {
@ -13,10 +12,8 @@ import { Color, Mode } from '../../interface';
}
})
export class CardTitle {
/**
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color?: Color;
@ -28,9 +25,8 @@ export class CardTitle {
hostData() {
return {
'role': 'heading',
role: 'heading',
'aria-level': '2'
};
}
}

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

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

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

@ -25,8 +25,7 @@
</ion-card-header>
<ion-card-content>
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.
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.
</ion-card-content>
</ion-card>
@ -38,8 +37,7 @@
</ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
This is content, without any paragraph or header tags, within an ion-card-content element.
</ion-card-content>
</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;
/**
* The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* The color to use for the checkbox.
*/
@Prop() color?: Color;
@ -50,7 +49,7 @@ export class Checkbox implements CheckboxInput {
@Prop() disabled = false;
/**
* the value of the checkbox.
* The value of the checkbox.
*/
@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.
```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 -->
@ -56,8 +21,7 @@ If true, the checkbox is selected. Defaults to `false`.
string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
The color to use for the checkbox.
#### disabled
@ -86,7 +50,7 @@ The name of the control, which is submitted with the form data.
string
the value of the checkbox.
The value of the checkbox.
## Attributes
@ -102,8 +66,7 @@ If true, the checkbox is selected. Defaults to `false`.
string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
The color to use for the checkbox.
#### disabled
@ -132,7 +95,7 @@ The name of the control, which is submitted with the form data.
string
the value of the checkbox.
The value of the checkbox.
## 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
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 -->

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 {
/**
* The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@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.
```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 -->
@ -63,7 +12,6 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
@ -81,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### 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
view component.
```html
<ion-content>
Add your content here!
</ion-content>
```
<!-- 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 { createThemedClasses, getElementClassMap } from '../../utils/theme';
@Component({
tag: 'ion-fab-button',
styleUrls: {
@ -11,22 +10,18 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
}
})
export class FabButton {
private inList = false;
@Element() el!: HTMLElement;
/**
* 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.
*/
@Prop() 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).
*/
@Prop() mode!: Mode;
@ -57,7 +52,7 @@ export class FabButton {
const parentNode = this.el.parentNode;
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 {
'fab-button-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-show': this.show,
'fab-button-show': this.show
};
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
const themedClasses = createThemedClasses(
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 TagType = this.href ? 'a' : 'button';
const fabClasses = {
...this.getFabClassMap(),
...themedClasses,
...translucentClasses,
...hostClasses,
...hostClasses
};
return (
<TagType
class={fabClasses}
disabled={this.disabled}
href={this.href}>
<ion-icon name="close" class="fab-button-close-icon"></ion-icon>
<TagType class={fabClasses} disabled={this.disabled} href={this.href}>
<ion-icon name="close" class="fab-button-close-icon" />
<span class="fab-button-inner">
<slot></slot>
<slot />
</span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
{this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
</TagType>
);
}

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

@ -1,38 +1,9 @@
# 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:
```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>
```
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.
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 -->
@ -49,9 +20,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
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.
#### disabled
@ -75,7 +44,6 @@ 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).
#### show
@ -103,9 +71,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
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.
#### disabled
@ -129,7 +95,6 @@ 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).
#### 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>
```