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

docs(): usage and examples

Browse Source
This commit is contained in:
mhartington
2018-06-18 12:45:06 -04:00
parent 518594bcc4
commit 96945b1ee1
66 changed files with 809 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4711,7 +4711,7 @@ declare global {
namespace StencilComponents {
interface IonPopover {
/**
* 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 from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': Color;
/**
@ -4749,7 +4749,7 @@ declare global {
*/
'leaveAnimation': AnimationBuilder;
/**
* 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;
/**
@ -4800,7 +4800,7 @@ declare global {
namespace JSXElements {
export interface IonPopoverAttributes 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 to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: Color;
/**
@ -4834,7 +4834,7 @@ declare global {
*/
'leaveAnimation'?: AnimationBuilder;
/**
* 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;
/**
@ -5471,6 +5471,9 @@ declare global {
namespace StencilComponents {
interface IonRippleEffect {
/**
* Adds the ripple effect to the parent elment
*/
'addRipple': (pageX: number, pageY: number) => void;
'tapClick': boolean;
}
@ -5619,7 +5622,13 @@ declare global {
'animationBuilder': AnimationBuilder;
'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
'delegate': FrameworkDelegate;
/**
* Returns the ID for the current route
*/
'getRouteId': () => RouteID | undefined;
/**
* Set the root component for the given navigation stack
*/
'setRoot': (component: ComponentRef, params?: ComponentProps | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
}
@ -5661,9 +5670,12 @@ declare global {
interface IonRouter {
'navChanged': (intent: RouterIntent) => Promise<boolean>;
'printDebug': () => void;
/**
* Navigate to the specified URL
*/
'push': (url: string, direction?: RouterDirection) => Promise<boolean>;
/**
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when T
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when
*/
'root': string;
/**
@ -5692,10 +5704,16 @@ declare global {
}
namespace JSXElements {
export interface IonRouterAttributes extends HTMLAttributes {
/**
* Emitted when the route had changed
*/
'onIonRouteDidChange'?: (event: CustomEvent<RouterEventDetail>) => void;
/**
* Event emitted when the route is about to change
*/
'onIonRouteWillChange'?: (event: CustomEvent<RouterEventDetail>) => void;
/**
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when T
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when
*/
'root'?: string;
/**
@ -5748,11 +5766,29 @@ declare global {
* If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
*/
'forceOverscroll': boolean;
/**
* The mode for component.
*/
'mode': Mode;
/**
* Scroll by a specified X/Y distance in the component
*/
'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
/**
* If true, the component will emit scroll events
*/
'scrollEvents': boolean;
/**
* Scroll to the bottom of the component
*/
'scrollToBottom': (duration: number) => Promise<void>;
/**
* Scroll to a specified X/Y location in the component
*/
'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
/**
* Scroll to the top of the component
*/
'scrollToTop': (duration: number) => Promise<void>;
}
}
@ -5780,6 +5816,9 @@ declare global {
* If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
*/
'forceOverscroll'?: boolean;
/**
* The mode for component.
*/
'mode'?: Mode;
/**
* Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`
@ -5793,6 +5832,9 @@ declare global {
* Emitted when the scroll has started.
*/
'onIonScrollStart'?: (event: CustomEvent<ScrollBaseDetail>) => void;
/**
* If true, the component will emit scroll events
*/
'scrollEvents'?: boolean;
}
}
@ -6155,9 +6197,21 @@ declare global {
namespace StencilComponents {
interface IonSelectPopover {
/**
* Header text for the popover
*/
'header': string;
/**
* Text for popover body
*/
'message': string;
/**
* Array of options for the popover
*/
'options': SelectPopoverOption[];
/**
* Subheader text for the popover
*/
'subHeader': string;
}
}
@ -6181,9 +6235,21 @@ declare global {
}
namespace JSXElements {
export interface IonSelectPopoverAttributes extends HTMLAttributes {
/**
* Header text for the popover
*/
'header'?: string;
/**
* Text for popover body
*/
'message'?: string;
/**
* Array of options for the popover
*/
'options'?: SelectPopoverOption[];
/**
* Subheader text for the popover
*/
'subHeader'?: string;
}
}
@ -6366,6 +6432,9 @@ declare global {
namespace StencilComponents {
interface IonSkeletonText {
/**
* Width for the element to render at. Default is 100%
*/
'width': string;
}
}
@ -6389,6 +6458,9 @@ declare global {
}
namespace JSXElements {
export interface IonSkeletonTextAttributes extends HTMLAttributes {
/**
* Width for the element to render at. Default is 100%
*/
'width'?: string;
}
}
@ -6588,7 +6660,7 @@ declare global {
namespace StencilComponents {
interface IonSpinner {
/**
* 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 from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': Color;
/**
@ -6596,7 +6668,7 @@ declare global {
*/
'duration': number;
/**
* 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;
/**
@ -6630,7 +6702,7 @@ declare global {
namespace JSXElements {
export interface IonSpinnerAttributes 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 to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: Color;
/**
@ -6638,7 +6710,7 @@ declare global {
*/
'duration'?: number;
/**
* 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;
/**
@ -6663,6 +6735,9 @@ declare global {
*/
'disabled': boolean;
'isPane': (element: HTMLElement) => boolean;
/**
* Returns if the split pane is toggled or not
*/
'isVisible': () => boolean;
/**
* When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
@ -6715,6 +6790,9 @@ declare global {
namespace StencilComponents {
interface IonStatusTap {
/**
* How long the scrolling action should take.
*/
'duration': number;
}
}
@ -6738,6 +6816,9 @@ declare global {
}
namespace JSXElements {
export interface IonStatusTapAttributes extends HTMLAttributes {
/**
* How long the scrolling action should take.
*/
'duration'?: number;
}
}
@ -6748,7 +6829,13 @@ declare global {
namespace StencilComponents {
interface IonTabButton {
/**
* If the tab is selected or not
*/
'selected': boolean;
/**
* The tab component for the button
*/
'tab': HTMLIonTabElement;
}
}
@ -6772,10 +6859,25 @@ declare global {
}
namespace JSXElements {
export interface IonTabButtonAttributes extends HTMLAttributes {
/**
* Emitted when the tab button is loaded
*/
'onIonTabButtonDidLoad'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the tab button is destroyed
*/
'onIonTabButtonDidUnload'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the tab bar is clicked
*/
'onIonTabbarClick'?: (event: CustomEvent<HTMLIonTabElement>) => void;
/**
* If the tab is selected or not
*/
'selected'?: boolean;
/**
* The tab component for the button
*/
'tab'?: HTMLIonTabElement;
}
}
@ -6786,6 +6888,9 @@ declare global {
namespace StencilComponents {
interface IonTab {
/**
* If the tab is active or not
*/
'active': boolean;
/**
* The badge for the tab.
@ -6795,6 +6900,9 @@ declare global {
* The badge color for the tab button.
*/
'badgeColor': Color;
/**
* hidden
*/
'btnId': string;
/**
* The component to display inside of the tab.
@ -6805,6 +6913,9 @@ declare global {
* If true, the user cannot interact with the tab. Defaults to `false`.
*/
'disabled': boolean;
/**
* Get the Id for the tab
*/
'getTabId': () => string | null;
/**
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
@ -6826,6 +6937,9 @@ declare global {
* If true, the tab will be selected. Defaults to `false`.
*/
'selected': boolean;
/**
* Set the active component for the tab
*/
'setActive': () => Promise<void>;
/**
* If true, the tab button is visible within the tabbar. Defaults to `true`.
@ -6857,6 +6971,9 @@ declare global {
}
namespace JSXElements {
export interface IonTabAttributes extends HTMLAttributes {
/**
* If the tab is active or not
*/
'active'?: boolean;
/**
* The badge for the tab.
@ -6866,6 +6983,9 @@ declare global {
* The badge color for the tab button.
*/
'badgeColor'?: Color;
/**
* hidden
*/
'btnId'?: string;
/**
* The component to display inside of the tab.
@ -6917,11 +7037,29 @@ declare global {
namespace StencilComponents {
interface IonTabbar {
/**
* If the tabbar should include the highlight on the active tab
*/
'highlight': boolean;
/**
* The layout of the title and icons
*/
'layout': TabbarLayout;
/**
* The placement of the tabbar in the app
*/
'placement': TabbarPlacement;
/**
* If the tabbar is scrollable or not
*/
'scrollable': boolean;
/**
* The selected tab component
*/
'selectedTab': HTMLIonTabElement;
/**
* The tabs to render
*/
'tabs': HTMLIonTabElement[];
/**
* If true, the tabbar will be translucent. Defaults to `false`.
@ -6949,11 +7087,29 @@ declare global {
}
namespace JSXElements {
export interface IonTabbarAttributes extends HTMLAttributes {
/**
* If the tabbar should include the highlight on the active tab
*/
'highlight'?: boolean;
/**
* The layout of the title and icons
*/
'layout'?: TabbarLayout;
/**
* The placement of the tabbar in the app
*/
'placement'?: TabbarPlacement;
/**
* If the tabbar is scrollable or not
*/
'scrollable'?: boolean;
/**
* The selected tab component
*/
'selectedTab'?: HTMLIonTabElement;
/**
* The tabs to render
*/
'tabs'?: HTMLIonTabElement[];
/**
* If true, the tabbar will be translucent. Defaults to `false`.
@ -6969,17 +7125,29 @@ declare global {
namespace StencilComponents {
interface IonTabs {
/**
* 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 from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': Color;
'getRouteId': () => RouteID | undefined;
/**
* Get the currently selected tab
*/
'getSelected': () => HTMLIonTabElement | undefined;
/**
* Get the tab at the given index
*/
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined;
/**
* A unique name for the tabs
*/
'name': string;
/**
* If the tabs should be scrollable
*/
'scrollable': boolean;
/**
* Index or the Tab instance, of the tab to select.
*/
'select': (tabOrIndex: number | HTMLIonTabElement) => Promise<boolean>;
'setRouteId': (id: string) => Promise<RouteWrite>;
/**
@ -7002,6 +7170,9 @@ declare global {
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/
'translucent': boolean;
/**
* If the tabs should use the router or not. If true, `selectedTab` does nothing.
*/
'useRouter': boolean;
}
}
@ -7026,7 +7197,7 @@ declare global {
namespace JSXElements {
export interface IonTabsAttributes 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 to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: Color;
/**
@ -7040,6 +7211,9 @@ declare global {
'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
/**
* If the tabs should be scrollable
*/
'scrollable'?: boolean;
/**
* If true, the tabbar
@ -7061,6 +7235,9 @@ declare global {
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If the tabs should use the router or not. If true, `selectedTab` does nothing.
*/
'useRouter'?: boolean;
}
}
@ -7105,11 +7282,11 @@ declare global {
namespace StencilComponents {
interface IonText {
/**
* 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 text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'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;
}
@ -7135,11 +7312,11 @@ declare global {
namespace JSXElements {
export interface IonTextAttributes 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 to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'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;
}
@ -7371,7 +7548,13 @@ declare global {
namespace StencilComponents {
interface IonTitle {
/**
* The color to use for the title. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
}
}
@ -7395,7 +7578,13 @@ declare global {
}
namespace JSXElements {
export interface IonTitleAttributes extends HTMLAttributes {
/**
* The color to use for the title. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode'?: Mode;
}
}
@ -7406,8 +7595,17 @@ declare global {
namespace StencilComponents {
interface IonToastController {
/**
* Create a toast overlay with toast options.
*/
'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement | null>;
/**
* Dismiss the open toast overlay.
*/
'dismiss': (data?: any, role?: string | undefined, toastId?: number) => Promise<void>;
/**
* Get the most recently opened toast overlay.
*/
'getTop': () => HTMLIonToastElement;
}
}
@ -7692,11 +7890,11 @@ declare global {
namespace StencilComponents {
interface IonToolbar {
/**
* 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 background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'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;
/**
@ -7726,11 +7924,11 @@ declare global {
namespace JSXElements {
export interface IonToolbarAttributes 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 to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'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;
/**

2
core/src/components/popover/popover.tsx
View File

@ -39,14 +39,12 @@ export class Popover implements OverlayInterface {
/**
* 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).
*/
@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;

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

@ -22,7 +22,6 @@ 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).
#### component
@ -91,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).
#### overlayId
@ -128,7 +126,6 @@ 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).
#### component
@ -197,7 +194,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).
#### overlay-id

3
core/src/components/refresher/readme.md
View File

@ -9,9 +9,6 @@ operation has completed and the refreshing should end, call `complete()` on the
refresher.
```html
```
<!-- Auto Generated Below -->

115
core/src/components/reorder-group/readme.md
View File

@ -1,119 +1,6 @@
# ion-reorder-group
ReorderGroup is a wrapper component for items with the Reorder element.
## Grouping Items
All reorderable items must be grouped in the same element. If an item
should not be reordered, it shouldn't be included in this group. For
example, the following code works because the items are grouped in the
`<ion-list>`:
```html
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
</ion-list>
```
However, the below list includes a header that shouldn't be reordered:
```html
<ion-list reorder="true">
<ion-list-header>Header</ion-list-header>
<ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
</ion-list>
```
In order to mix different sets of items, `ion-item-group` should be used to
group the reorderable items:
```html
<ion-list>
<ion-list-header>Header</ion-list-header>
<ion-item-group reorder="true">
<ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
</ion-item-group>
</ion-list>
```
It's important to note that in this example, the `[reorder]` directive is applied to
the `<ion-item-group>` instead of the `<ion-list>`. This way makes it possible to
mix items that should and shouldn't be reordered.
## Implementing the Reorder Function
When the item is dragged and dropped into the new position, the `(ionItemReorder)` event is
emitted. This event provides the initial index (from) and the new index (to) of the reordered
item. For example, if the first item is dragged to the fifth position, the event will emit
`{from: 0, to: 4}`. Note that the index starts at zero.
A function should be called when the event is emitted that handles the reordering of the items.
See usage below for some examples.
```html
<ion-list>
<ion-list-header>Header</ion-list-header>
<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
<ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
</ion-item-group>
</ion-list>
```
```ts
class MyComponent {
items = [];
constructor() {
for (let x = 0; x < 5; x++) {
this.items.push(x);
}
}
reorderItems(indexes) {
let element = this.items[indexes.from];
this.items.splice(indexes.from, 1);
this.items.splice(indexes.to, 0, element);
}
}
```
Ionic also provides a helper function called `reorderArray` to
reorder the array of items. This can be used instead:
```ts
import { reorderArray } from 'ionic-angular';
class MyComponent {
items = [];
constructor() {
for (let x = 0; x < 5; x++) {
this.items.push(x);
}
}
reorderItems(indexes) {
this.items = reorderArray(this.items, indexes);
}
}
```
Alternatively the helper function can be executed inside a template:
```html
<ion-list>
<ion-list-header>Header</ion-list-header>
<ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
<ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
</ion-item-group>
</ion-list>
```
ReorderGroup is a wrapper component for items with the Reorder element. For more information, see the [Reorder docs](../reorder/)
<!-- Auto Generated Below -->

2
core/src/components/reorder/readme.md
View File

@ -1,6 +1,6 @@
# ion-reorder
Reorder adds the ability to change an item's order in a group. It can be used within an ion-list or ion-reorder-group to provide a visual drag and drop interface.
Reorder is a component that allows an item to be dragged to change it's order. It can be used within an ion-reorder-group to provide a visual drag and drop interface.
<!-- Auto Generated Below -->

88
core/src/components/reorder/usage/javascript.md Normal file
View File

@ -0,0 +1,88 @@
```html
<ion-content>
<ion-list>
<ion-reorder-group>
<ion-item>
<ion-label>
Item 1
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label>
Item 2
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label>
Item 3 (default ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item color="secondary">
<ion-label>
Item 4 (default ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item>
<ion-label>
Item 5 (custom ion-reorder)
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label>
Item 6 (custom ion-reorder)
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label>
Item 7 (custom ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 8 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 9 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 10 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
</ion-content>
```

4
core/src/components/ripple-effect/readme.md
View File

@ -1,5 +1,7 @@
# ion-button-effect
RippleEffect is component that adds the Material Design button ripple to any element.
<!-- Auto Generated Below -->
@ -23,6 +25,8 @@ boolean
#### addRipple()
Adds the ripple effect to the parent elment
----------------------------------------------

4
core/src/components/ripple-effect/ripple-effect.tsx
View File

@ -15,6 +15,7 @@ export class RippleEffect {
@Prop({context: 'enableListener'}) enableListener!: EventListenerEnable;
@Prop({ context: 'document' }) doc!: Document;
/** @hidden */
@Prop() tapClick = false;
@Watch('tapClick')
tapClickChanged(tapClick: boolean) {
@ -47,6 +48,9 @@ export class RippleEffect {
this.tapClickChanged(this.tapClick);
}
/**
* Adds the ripple effect to the parent elment
*/
@Method()
addRipple(pageX: number, pageY: number) {
let x: number, y: number, size: number;

2
core/src/components/route-redirect/readme.md
View File

@ -2,6 +2,8 @@
A redirect router can only be used in the scope of `ion-router` as a direct children of it.
> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
This route has only two configurable values:
- `from`
- `to`

2
core/src/components/route/readme.md
View File

@ -1,6 +1,8 @@
# ion-route
Router is a component that can take a component, and render it when the Browser URl matches the url prop
> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
<!-- Auto Generated Below -->

10
core/src/components/router-outlet/readme.md
View File

@ -1,5 +1,11 @@
# ion-router-outlet
RouterOutlet is a component used in routing within an Angular app. RouterOutlet behaves the same way as Angular's built-in RouterOutlet component, but contains the logic needed for animating views in and out.
> Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead.
While RouterOutlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
<!-- Auto Generated Below -->
@ -57,9 +63,13 @@ boolean
#### getRouteId()
Returns the ID for the current route
#### setRoot()
Set the root component for the given navigation stack
#### setRouteId()

6
core/src/components/router-outlet/route-outlet.tsx
View File

@ -41,6 +41,9 @@ export class RouterOutlet implements NavOutlet {
this.activeEl = this.activeComponent = undefined;
}
/**
* Set the root component for the given navigation stack
*/
@Method()
async setRoot(component: ComponentRef, params?: ComponentProps, opts?: RouterOutletOptions): Promise<boolean> {
if (this.isTransitioning || this.activeComponent === component) {
@ -62,6 +65,7 @@ export class RouterOutlet implements NavOutlet {
return true;
}
/** @hidden */
@Method()
async commit(enteringEl: HTMLElement, leavingEl: HTMLElement|undefined, opts?: RouterOutletOptions): Promise<boolean> {
// isTransitioning acts as a lock to prevent reentering
@ -93,6 +97,7 @@ export class RouterOutlet implements NavOutlet {
return true;
}
/** @hidden */
@Method()
async setRouteId(id: string, params: any, direction: number): Promise<RouteWrite> {
const changed = await this.setRoot(id, params, {
@ -105,6 +110,7 @@ export class RouterOutlet implements NavOutlet {
};
}
/** Returns the ID for the current route */
@Method()
getRouteId(): RouteID|undefined {
const active = this.activeEl;

78
core/src/components/router/readme.md
View File

@ -1,6 +1,9 @@
# ion-router
You should have one single `ion-router` component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.
Router is a component for handling routing inside vanilla JavaScript projects. For Angular projects, use `ion-router-outlet` and the Angular router.
Apps should have a single `ion-router` component in the codebase.
This component controls all interactions with the browser history and it aggregates updates through an event system.
`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav` and `ion-tabs`.
@ -10,69 +13,6 @@ In order to configure this relationship between components (to load/select) and
If you're using Angular, please see [ion-router-outlet](../router-outlet) instead.
## Ecosystem of components
### Configuration
- <ion-router>
- <ion-route>
- <ion-router-redirect>
### Outlets
- <ion-nav>
- <ion-router-outlet>
- <ion-tab>
## Tree of routes
The way to structure navigation in an ionic app is by nesting `ion-nav`s and `ion-tabs`, for example, you have an `ion-nav` at the root, where you "push" an page that has an `ion-tabs`, then inside each tab (`ion-tab`) you might have another `ion-nav` since you might want independent navigation for each tab.
Obviously this structure is app-dependent, but in any case, nesting router-outlets (ion-nav or ion-tabs) is a common pattern. This is why the routes defined in `ion-router` are not a list of routes, but an tree.
Any route can have a list of nested routes:
```html
<ion-router>
<ion-route component="page-tabs">
<ion-route url="/schedule" component="tab-schedule">
<ion-route component="page-schedule"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
</ion-route>
<ion-route url="/speakers" component="tab-speaker">
<ion-route component="page-speaker-list"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
<ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
</ion-route>
<ion-route url="/map" component="page-map"></ion-route>
<ion-route url="/about" component="page-about"></ion-route>
</ion-route>
<ion-route url="/tutorial" component="page-tutorial"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
<ion-route url="/account" component="page-account"></ion-route>
<ion-route url="/signup" component="page-signup"></ion-route>
<ion-route url="/support" component="page-support"></ion-route>
</ion-router>
```
This hierarchy of routes matches the hierarchy of how `ion-tab`s and `ion-nav`s are nested together.
## Router configuration
## Router guards and redirections
## Navigating Statically
## Navigating Dynamically
## URL params and data passing
## JSX reactiviness
<!-- Auto Generated Below -->
@ -87,8 +27,6 @@ string
By default `ion-router` will match the routes at the root path ("/").
That can be changed when
T
#### useHash
@ -117,8 +55,6 @@ string
By default `ion-router` will match the routes at the root path ("/").
That can be changed when
T
#### use-hash
@ -142,9 +78,13 @@ By default, this property is `true`, change to `false` to allow hash-less URLs.
#### ionRouteDidChange
Emitted when the route had changed
#### ionRouteWillChange
Event emitted when the route is about to change
## Methods
@ -156,6 +96,8 @@ By default, this property is `true`, change to `false` to allow hash-less URLs.
#### push()
Navigate to the specified URL
----------------------------------------------

11
core/src/components/router/router.tsx
View File

@ -29,7 +29,6 @@ export class Router {
* By default `ion-router` will match the routes at the root path ("/").
* That can be changed when
*
* T
*/
@Prop() root = '/';
@ -49,7 +48,14 @@ export class Router {
*/
@Prop() useHash = true;
/**
* Event emitted when the route is about to change
*/
@Event() ionRouteWillChange!: EventEmitter<RouterEventDetail>;
/**
* Emitted when the route had changed
*/
@Event() ionRouteDidChange!: EventEmitter<RouterEventDetail>;
async componentWillLoad() {
@ -72,6 +78,7 @@ export class Router {
return this.writeNavStateRoot(path, direction);
}
/** Navigate to the specified URL */
@Method()
push(url: string, direction: RouterDirection = 'forward') {
const path = parsePath(url);
@ -82,6 +89,7 @@ export class Router {
return this.writeNavStateRoot(path, intent);
}
/** @hidden */
@Method()
printDebug() {
console.debug('CURRENT PATH', this.getPath());
@ -90,6 +98,7 @@ export class Router {
printRedirects(readRedirects(this.el));
}
/** @hidden */
@Method()
async navChanged(intent: RouterIntent): Promise<boolean> {
if (this.busy) {

26
core/src/components/router/usage/javascript.md Normal file
View File

@ -0,0 +1,26 @@
```html
<ion-router>
<ion-route component="page-tabs">
<ion-route url="/schedule" component="tab-schedule">
<ion-route component="page-schedule"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
</ion-route>
<ion-route url="/speakers" component="tab-speaker">
<ion-route component="page-speaker-list"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
<ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
</ion-route>
<ion-route url="/map" component="page-map"></ion-route>
<ion-route url="/about" component="page-about"></ion-route>
</ion-route>
<ion-route url="/tutorial" component="page-tutorial"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
<ion-route url="/account" component="page-account"></ion-route>
<ion-route url="/signup" component="page-signup"></ion-route>
<ion-route url="/support" component="page-support"></ion-route>
</ion-router>
```

17
core/src/components/scroll/readme.md
View File

@ -1,5 +1,6 @@
# ion-scroll
Scroll is a low-level component for arbitrary scrolling areas. It's used internally by Content.
<!-- Auto Generated Below -->
@ -20,11 +21,15 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
string
The mode for component.
#### scrollEvents
boolean
If true, the component will emit scroll events
## Attributes
@ -41,11 +46,15 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
string
The mode for component.
#### scroll-events
boolean
If true, the component will emit scroll events
## Events
@ -69,15 +78,23 @@ Emitted when the scroll has started.
#### scrollByPoint()
Scroll by a specified X/Y distance in the component
#### scrollToBottom()
Scroll to the bottom of the component
#### scrollToPoint()
Scroll to a specified X/Y location in the component
#### scrollToTop()
Scroll to the top of the component
----------------------------------------------

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

@ -25,6 +25,7 @@ export class Scroll {
@Prop({ context: 'queue' }) queue!: QueueController;
@Prop({ context: 'window' }) win!: Window;
/** The mode for component. */
@Prop() mode!: Mode;
@ -35,6 +36,7 @@ export class Scroll {
*/
@Prop({ mutable: true }) forceOverscroll?: boolean;
/** If true, the component will emit scroll events */
@Prop() scrollEvents = false;
/**
@ -109,11 +111,13 @@ export class Scroll {
}
}
/** Scroll to the top of the component */
@Method()
scrollToTop(duration: number): Promise<void> {
return this.scrollToPoint(0, 0, duration);
}
/** Scroll to the bottom of the component */
@Method()
scrollToBottom(duration: number): Promise<void> {
const y = (this.el)
@ -123,11 +127,13 @@ export class Scroll {
return this.scrollToPoint(0, y, duration);
}
/** Scroll by a specified X/Y distance in the component */
@Method()
scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
return this.scrollToPoint(x + this.el.scrollLeft, y + this.el.scrollTop, duration, done);
}
/** Scroll to a specified X/Y location in the component */
@Method()
scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
// scroll animation loop w/ easing

32
core/src/components/searchbar/readme.md
View File

@ -2,39 +2,9 @@
Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.
A searchbar should be used instead of an input to search lists. A clear button is displayed on input in the searchbar's text field. Clicking on the clear button will erase the text field and remain focused in the input. A cancel button can be enabled which will clear the input and remove focus.
A Searchbar should be used instead of an input to search lists. A clear button is displayed on input in the searchbar's text field. Clicking on the clear button will erase the text field and the input focused. A cancel button can be enabled which will clear the input and remove focus.
```html
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>
<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>
<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>
<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>
<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<!-- Searchbar in a Toolbar -->
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
```
<!-- Auto Generated Below -->

30
core/src/components/searchbar/usage/javascript.md Normal file
View File

@ -0,0 +1,30 @@
```html
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>
<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>
<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>
<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>
<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<!-- Searchbar in a Toolbar -->
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
```

1
core/src/components/segment-button/usage/angular.md
View File

@ -1,4 +1,3 @@
```html
<!-- Segment buttons with text and click listeners -->
<ion-segment>

1
core/src/components/segment-button/usage/javascript.md
View File

@ -1,4 +1,3 @@
```html
<!-- Segment buttons with text -->
<ion-segment>

1
core/src/components/select-option/readme.md
View File

@ -1,5 +1,6 @@
# ion-select-option
SelectOption is a component that is a child element of Select. For more information, see the [Select docs](../select).
<!-- Auto Generated Below -->

17
core/src/components/select-popover/readme.md
View File

@ -1,5 +1,6 @@
# ion-select-popover
SelectPopover is an internal component that is used for create the popover interface, from a Select component.
<!-- Auto Generated Below -->
@ -11,21 +12,29 @@
string
Header text for the popover
#### message
string
Text for popover body
#### options
SelectPopoverOption[]
Array of options for the popover
#### subHeader
string
Subheader text for the popover
## Attributes
@ -33,21 +42,29 @@ string
string
Header text for the popover
#### message
string
Text for popover body
#### options
Array of options for the popover
#### sub-header
string
Subheader text for the popover
----------------------------------------------

4
core/src/components/select-popover/select-popover.tsx
View File

@ -11,12 +11,16 @@ import { Mode, SelectPopoverOption } from '../../interface';
export class SelectPopover {
mode!: Mode;
/** Header text for the popover */
@Prop() header?: string;
/** Subheader text for the popover */
@Prop() subHeader?: string;
/** Text for popover body */
@Prop() message?: string;
/** Array of options for the popover */
@Prop() options: SelectPopoverOption[] = [];
@Listen('ionSelect')

5
core/src/components/skeleton-text/readme.md
View File

@ -1,5 +1,6 @@
# ion-skeleton-text
Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
<!-- Auto Generated Below -->
@ -11,6 +12,8 @@
string
Width for the element to render at. Default is 100%
## Attributes
@ -18,6 +21,8 @@ string
string
Width for the element to render at. Default is 100%
----------------------------------------------

7
core/src/components/skeleton-text/skeleton-text.tsx
View File

@ -1,6 +1,5 @@
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'ion-skeleton-text',
styleUrls: {
@ -12,9 +11,11 @@ import { Component, Prop } from '@stencil/core';
}
})
export class SkeletonText {
/** Width for the element to render at. Default is 100% */
@Prop() width = '100%';
render () {
return <span style={{width: this.width}}>&nbsp;</span>;
render() {
return <span style={{ width: this.width }}>&nbsp;</span>;
}
}

0
core/src/components/skeleton-text/usage/javascript.md Normal file
View File

5
core/src/components/slides/readme.md
View File

@ -4,10 +4,8 @@ The Slides component is a multi-section container. Each section can be swiped
or dragged between. It contains any number of [Slide](../Slide) components.
```
Adopted from Swiper.js:
The most modern mobile touch slider and framework with
hardware accelerated transitions.
The most modern mobile touch slider and framework with hardware accelerated transitions.
http://www.idangero.us/swiper/
@ -16,7 +14,6 @@ The iDangero.us
http://www.idangero.us/
Licensed under MIT
```
<!-- Auto Generated Below -->

10
core/src/components/slides/slides.tsx
View File

@ -1,12 +1,4 @@
import {
Component,
Element,
Event,
EventEmitter,
Method,
Prop,
Watch
} from '@stencil/core';
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { Swiper } from './vendor/swiper.js';
@Component({
tag: 'ion-slides',

26
core/src/components/slides/usage/angular.md Normal file
View File

@ -0,0 +1,26 @@
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'slides-example',
template: `
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
`
})
export class SlideExample {
slideOpts = {
effect: 'flip'
};
constructor() {}
}
```

23
core/src/components/slides/usage/javascript.md Normal file
View File

@ -0,0 +1,23 @@
```html
<ion-slides pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
```
```javascript
var slides = document.querySelector('ion-slides');
slides.options = {
effect: 'flip'
}
```

29
core/src/components/spinner/readme.md
View File

@ -4,31 +4,6 @@ The Spinner component provides a variety of animated SVG spinners. Spinners are
The default spinner to use is based on the platform. The default spinner for `ios` is `"lines"`, and the default for `android` is `"crescent"`. If the platform is not `ios` or `android`, the spinner will default to `crescent`. If the `name` property is set, then that spinner will be used instead of the platform specific spinner.
```html
<!-- Default Spinner -->
<ion-spinner></ion-spinner>
<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>
<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>
<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>
<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>
<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>
```
<!-- Auto Generated Below -->
@ -42,7 +17,6 @@ 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).
#### duration
@ -58,7 +32,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).
#### name
@ -85,7 +58,6 @@ 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).
#### duration
@ -101,7 +73,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).
#### name

2
core/src/components/spinner/spinner.tsx
View File

@ -20,14 +20,12 @@ export class Spinner {
/**
* 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).
*/
@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;

25
core/src/components/spinner/usage/javascript.md Normal file
View File

@ -0,0 +1,25 @@
```html
<!-- Default Spinner -->
<ion-spinner></ion-spinner>
<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>
<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>
<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>
<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>
<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>
```

77
core/src/components/split-pane/readme.md
View File

@ -9,30 +9,6 @@ collapse and the menu will become hidden again. This is especially useful when
creating an app that will be served over a browser or deployed through the app
store to phones and tablets.
To use SplitPane, simply add the component around your root component.
In this example, we'll be using a sidemenu layout, similar to what is
provided from the sidemenu starter template.
```html
<ion-split-pane>
<!-- our side menu -->
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main></ion-nav>
</ion-split-pane>
```
Here, SplitPane will look for the element with the `main` attribute and make
that the central component on larger screens. The `main` component can be any
Ionic component (`ion-nav` or `ion-tabs`) except `ion-menu`.
### Setting breakpoints
@ -40,26 +16,12 @@ By default, SplitPane will expand when the screen is larger than 768px.
If you want to customize this, use the `when` input. The `when` input can
accept any valid media query, as it uses `matchMedia()` underneath.
```
<ion-split-pane when="(min-width: 475px)">
<!-- our side menu -->
<ion-menu>
....
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main></ion-nav>
</ion-split-pane>
```
SplitPane also provides some predefined media queries that can be used.
```html
<!-- could be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="lg">
...
</ion-split-pane>
<ion-split-pane when="lg"></ion-split-pane>
```
@ -75,41 +37,6 @@ SplitPane also provides some predefined media queries that can be used.
or expression evaluates to true.
```html
<ion-split-pane [when]="isLarge">
...
</ion-split-pane>
```
```ts
class MyClass {
public isLarge = false;
constructor(){}
}
```
Or
```html
<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
```
```ts
class MyClass {
constructor(){}
shouldShow(){
if(conditionA){
return true
} else {
return false
}
}
}
```
<!-- Auto Generated Below -->
@ -168,6 +95,8 @@ Expression to be called when the split-pane visibility has changed
#### isVisible()
Returns if the split pane is toggled or not
----------------------------------------------

2
core/src/components/split-pane/split-pane.tsx
View File

@ -112,11 +112,13 @@ export class SplitPane {
this.visible = mediaList.matches;
}
/** Returns if the split pane is toggled or not */
@Method()
isVisible(): boolean {
return this.visible;
}
/** @hidden */
@Method()
isPane(element: HTMLElement): boolean {
if (!this.visible) {

15
core/src/components/split-pane/usage/angular.md Normal file
View File

@ -0,0 +1,15 @@
```html
<ion-split-pane>
<!-- our side menu -->
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
```

17
core/src/components/split-pane/usage/javascript.md Normal file
View File

@ -0,0 +1,17 @@
```html
<ion-split-pane>
<!-- our side menu -->
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-content main>
<h1>Hello</h1>
</ion-content>
</ion-split-pane>
```

4
core/src/components/status-tap/readme.md
View File

@ -11,6 +11,8 @@
number
How long the scrolling action should take.
## Attributes
@ -18,6 +20,8 @@ number
number
How long the scrolling action should take.
----------------------------------------------

1
core/src/components/status-tap/status-tap.tsx
View File

@ -9,6 +9,7 @@ export class StatusTap {
@Prop({ context: 'queue' }) queue!: QueueController;
@Prop({ context: 'window' }) win!: Window;
/** How long the scrolling action should take. */
@Prop() duration = 300;
@Listen('window:statusTap')

15
core/src/components/tab-button/readme.md
View File

@ -1,5 +1,6 @@
# ion-tab-button
TabButton is an internal component for tabs. Please see the [Tab docs](../tab) for more details.
<!-- Auto Generated Below -->
@ -11,11 +12,15 @@
boolean
If the tab is selected or not
#### tab
HTMLIonTabElement
The tab component for the button
## Attributes
@ -23,22 +28,32 @@ HTMLIonTabElement
boolean
If the tab is selected or not
#### tab
The tab component for the button
## Events
#### ionTabButtonDidLoad
Emitted when the tab button is loaded
#### ionTabButtonDidUnload
Emitted when the tab button is destroyed
#### ionTabbarClick
Emitted when the tab bar is clicked
----------------------------------------------

8
core/src/components/tab-button/tab-button.tsx
View File

@ -17,11 +17,19 @@ export class TabButton {
@State() keyFocus = false;
/** If the tab is selected or not */
@Prop() selected = false;
/** The tab component for the button */
@Prop() tab!: HTMLIonTabElement;
/** Emitted when the tab bar is clicked */
@Event() ionTabbarClick!: EventEmitter<HTMLIonTabElement>;
/** Emitted when the tab button is loaded */
@Event() ionTabButtonDidLoad!: EventEmitter<void>;
/** Emitted when the tab button is destroyed */
@Event() ionTabButtonDidUnload!: EventEmitter<void>;
componentDidLoad() {

56
core/src/components/tab/readme.md
View File

@ -1,49 +1,11 @@
# ion-tab
The Tab component, written `<ion-tab>`, is styled based on the mode and should
be used in conjunction with the [Tabs](../Tabs/) component.
Each `ion-tab` is a declarative component for a [NavController](../../../navigation/NavController/).
Basically, each tab is a `NavController`. For more information on using
navigation controllers take a look at the [NavController API Docs](../../../navigation/NavController/).
The Tab component is a child component of the [Tabs](../Tabs/) component.
Each Tab is meant to be a top level navigation stack for an app.
Meaning that an app can have many tabs, all wit their own independent navigation.
See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
To add a basic tab, you can use the following markup where the `root` property
is the page you want to load for that tab, `label` is the optional text to
display on the tab, and `icon` is the optional [icon](../../icon/Icon/).
```html
<ion-tabs>
<ion-tab [root]="chatRoot" label="Chat" icon="chat"></ion-tab>
</ion-tabs>
```
Sometimes you may want to call a method instead of navigating to a new
page. You can use the `(ionSelect)` event to call a method on your class when
the tab is selected. Below is an example of presenting a modal from one of
the tabs.
```html
<ion-tabs>
<ion-tab (ionSelect)="chat()" label="Show Modal"></ion-tab>
</ion-tabs>pop
```
```ts
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
```
<!-- Auto Generated Below -->
@ -54,6 +16,8 @@ export class Tabs {
boolean
If the tab is active or not
#### badge
@ -73,6 +37,8 @@ The badge color for the tab button.
string
hidden
#### component
@ -148,6 +114,8 @@ If true, hide the tabs on child pages.
boolean
If the tab is active or not
#### badge
@ -167,6 +135,8 @@ The badge color for the tab button.
string
hidden
#### component
@ -247,9 +217,13 @@ Emitted when the current tab is selected.
#### getTabId()
Get the Id for the tab
#### setActive()
Set the active component for the tab
----------------------------------------------

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

@ -10,9 +10,13 @@ export class Tab {
private loaded = false;
@Element() el!: HTMLIonTabElement;
/** If the tab is active or not */
@Prop({ mutable: true }) active = false;
/** hidden */
@Prop() btnId?: string;
/** @hidden */
@Prop() delegate?: FrameworkDelegate;
/**
@ -94,6 +98,7 @@ export class Tab {
}
}
/** Get the Id for the tab */
@Method()
getTabId(): string|null {
if (this.name) {
@ -105,6 +110,7 @@ export class Tab {
return null;
}
/** Set the active component for the tab */
@Method()
async setActive(): Promise<void> {
await this.prepareLazyLoaded();

25
core/src/components/tabbar/readme.md
View File

@ -1,5 +1,6 @@
# ion-tabbar
Tabbar is an internal component for Tabs. Please see the [Tabs documentation](../tabs).
<!-- Auto Generated Below -->
@ -11,31 +12,43 @@
boolean
If the tabbar should include the highlight on the active tab
#### layout
string
The layout of the title and icons
#### placement
string
The placement of the tabbar in the app
#### scrollable
boolean
If the tabbar is scrollable or not
#### selectedTab
HTMLIonTabElement
The selected tab component
#### tabs
HTMLIonTabElement[]
The tabs to render
#### translucent
@ -50,31 +63,43 @@ If true, the tabbar will be translucent. Defaults to `false`.
boolean
If the tabbar should include the highlight on the active tab
#### layout
string
The layout of the title and icons
#### placement
string
The placement of the tabbar in the app
#### scrollable
boolean
If the tabbar is scrollable or not
#### selected-tab
The selected tab component
#### tabs
The tabs to render
#### translucent

11
core/src/components/tabbar/tabbar.tsx
View File

@ -31,10 +31,19 @@ export class Tabbar {
@State() canScrollRight = false;
@State() hidden = false;
/** The layout of the title and icons */
@Prop() layout: TabbarLayout = 'icon-top';
/** The placement of the tabbar in the app */
@Prop() placement: TabbarPlacement = 'bottom';
/** The selected tab component */
@Prop() selectedTab?: HTMLIonTabElement;
/** If the tabbar is scrollable or not */
@Prop() scrollable = false;
/** The tabs to render */
@Prop() tabs: HTMLIonTabElement[] = [];
@Watch('selectedTab')
@ -43,6 +52,8 @@ export class Tabbar {
this.highlight && this.updateHighlight();
}
/** If the tabbar should include the highlight on the active tab */
@Prop() highlight = false;
/**

103
core/src/components/tabs/readme.md
View File

@ -1,88 +1,7 @@
# ion-tabs
Tabs make it easy to navigate between different pages or functional
aspects of an app. The Tabs component, written as `<ion-tabs>`, is
a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
is a declarative component for a [NavController](../../../navigation/NavController/)
For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
take a look at the [NavController API Docs](../../../navigation/NavController/).
### Placement
The position of the tabs relative to the content varies based on
the mode. The tabs are placed at the bottom of the screen
for iOS and Android, and at the top for Windows by default. The position can
be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
or in an app's [config](../../config/Config/).
See the [Input Properties](#input-properties) below for the available
values of `tabsPlacement`.
### Layout
The layout for all of the tabs can be defined using the `tabsLayout`
property. If the individual tab has a title and icon, the icons will
show on top of the title by default. All tabs can be changed by setting
the value of `tabsLayout` on the `<ion-tabs>` element, or in your
app's [config](../../config/Config/). For example, this is useful if
you want to show tabs with a title only on Android, but show icons
and a title for iOS. See the [Input Properties](#input-properties)
below for the available values of `tabsLayout`.
### Selecting a Tab
There are different ways you can select a specific tab from the tabs
component. You can use the `selectedIndex` property to set the index
on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
instance after creation. See [usage](#usage) below for more information.
You can add a basic tabs template to a `@Component` using the following
template:
```html
<ion-tabs>
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
By default, the first tab will be selected upon navigation to the
Tabs page. We can change the selected tab by using `selectedIndex`
on the `<ion-tabs>` element:
```html
<ion-tabs selectedIndex="2">
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
```html
<ion-tabs #myTabs>
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
Then in your class you can grab the `Tabs` instance and call `select()`,
passing the index of the tab as the argument. Here we're grabbing the tabs
by using ViewChild.
You can also switch tabs from a child component by calling `select()` on the
parent view using the `NavController` instance. For example, assuming you have
a `TabsPage` component, you could call the following from any of the child
components to switch to `TabsRoot3`:
Tabs are a top level navigation component for created multiple stacked navs.
The component is a container of individual [Tab](../Tab/) components.
<!-- Auto Generated Below -->
@ -96,7 +15,6 @@ 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).
#### name
@ -110,6 +28,8 @@ A unique name for the tabs
boolean
If the tabs should be scrollable
#### tabbarHidden
@ -153,6 +73,9 @@ Defaults to `false`.
boolean
If the tabs should use the router or not.
If true, `selectedTab` does nothing.
## Attributes
@ -162,7 +85,6 @@ 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).
#### name
@ -176,6 +98,8 @@ A unique name for the tabs
boolean
If the tabs should be scrollable
#### tabbar-hidden
@ -219,6 +143,9 @@ Defaults to `false`.
boolean
If the tabs should use the router or not.
If true, `selectedTab` does nothing.
## Events
@ -243,12 +170,18 @@ Emitted when the tab changes.
#### getSelected()
Get the currently selected tab
#### getTab()
Get the tab at the given index
#### select()
Index or the Tab instance, of the tab to select.
#### setRouteId()

13
core/src/components/tabs/tabs.tsx
View File

@ -25,7 +25,6 @@ export class Tabs implements NavOutlet {
/**
* 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).
*/
@Prop() color?: Color;
@ -62,8 +61,13 @@ export class Tabs implements NavOutlet {
*/
@Prop() translucent = false;
/** If the tabs should be scrollable */
@Prop() scrollable = false;
/**
* If the tabs should use the router or not.
* If true, `selectedTab` does nothing.
*/
@Prop({ mutable: true }) useRouter = false;
/**
@ -110,7 +114,7 @@ export class Tabs implements NavOutlet {
}
/**
* @param {number|Tab} tabOrIndex Index, or the Tab instance, of the tab to select.
* Index or the Tab instance, of the tab to select.
*/
@Method()
async select(tabOrIndex: number | HTMLIonTabElement): Promise<boolean> {
@ -125,6 +129,7 @@ export class Tabs implements NavOutlet {
return true;
}
/** @hidden */
@Method()
async setRouteId(id: string): Promise<RouteWrite> {
const selectedTab = this.getTab(id);
@ -140,12 +145,14 @@ export class Tabs implements NavOutlet {
};
}
/** @hidden */
@Method()
getRouteId(): RouteID|undefined {
const id = this.selectedTab && this.selectedTab.getTabId();
return id ? {id, element: this.selectedTab} : undefined;
}
/** Get the tab at the given index */
@Method()
getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement|undefined {
if (typeof tabOrIndex === 'string') {
@ -158,7 +165,7 @@ export class Tabs implements NavOutlet {
}
/**
* @return {HTMLIonTabElement} Returns the currently selected tab
* Get the currently selected tab
*/
@Method()
getSelected(): HTMLIonTabElement | undefined {

16
core/src/components/tabs/usage/angular.md Normal file
View File

@ -0,0 +1,16 @@
```html
<ion-tabs>
<ion-tab label="Schedule" icon="calendar" href="/app/tabs/(schedule:schedule)">
<ion-router-outlet stack name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab label="Speakers" icon="contacts" href="/app/tabs/(speakers:speakers)">
<ion-router-outlet stack name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab label="Map" icon="map" href="/app/tabs/(map:map)">
<ion-router-outlet stack name="map"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" href="/app/tabs/(about:about)">
<ion-router-outlet stack name="about"></ion-router-outlet>
</ion-tab>
</ion-tabs>
```

12
core/src/components/tabs/usage/javascript.md Normal file
View File

@ -0,0 +1,12 @@
```html
<ion-tabs>
<ion-tab label="schedule" icon="calendar" name="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab label="speakers" icon="contacts" name="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab label="map" icon="map" component="page-map"></ion-tab>
<ion-tab label="about" icon="information-circle" component="page-about"></ion-tab>
</ion-tabs>
```

1
core/src/components/tap-click/readme.md
View File

@ -1,5 +1,6 @@
# ion-tap-click
TabClick is an internal component with no public API.
<!-- Auto Generated Below -->

8
core/src/components/text/readme.md
View File

@ -12,9 +12,8 @@ The text component is a simple component that can be used to style the text colo
string
The color to use from your Sass `$colors` map.
The color to use for the text.
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
@ -23,7 +22,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 +30,8 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
The color to use from your Sass `$colors` map.
The color to use for the text.
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
@ -43,7 +40,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).

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

@ -15,16 +15,14 @@ import { Color, Mode } from '../../interface';
export class Text {
/**
* The color to use from your Sass `$colors` map.
* The color to use for the text.
* 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;
/**
* 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;

29
core/src/components/text/usage/angular.md
View File

@ -1,29 +0,0 @@
```html
<ion-text color="secondary">
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
</ion-text>
<ion-text color="primary">
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
</ion-text>
<ion-text color="light">
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
</ion-text>
<ion-text color="danger">
<h4 >H4: The quick brown fox jumps over the lazy dog</h4>
</ion-text>
<ion-text color="dark">
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
</ion-text>
<p>
I saw a werewolf with a Chinese menu in his hand.
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
</p>
```

37
core/src/components/textarea/readme.md
View File

@ -6,43 +6,6 @@ Unlike the native textarea element, the Ionic textarea does not support loading
The textarea component accepts the [native textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) in addition to the Ionic properties.
```html
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
```
<!-- Auto Generated Below -->

37
core/src/components/textarea/usage/javascript.md Normal file
View File

@ -0,0 +1,37 @@
```html
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
```

12
core/src/components/thumbnail/usage/angular.md
View File

@ -1,12 +0,0 @@
```html
<ion-thumbnail>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
```

21
core/src/components/title/readme.md
View File

@ -2,15 +2,6 @@
`ion-title` is a component that sets the title of the `Toolbar`.
```html
<ion-header>
<ion-toolbar>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>
```
<!-- Auto Generated Below -->
@ -22,11 +13,17 @@
string
The color to use for the title.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
## Attributes
@ -34,11 +31,17 @@ string
string
The color to use for the title.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
----------------------------------------------

9
core/src/components/title/title.tsx
View File

@ -15,7 +15,16 @@ import { createThemedClasses } from '../../utils/theme';
})
export class ToolbarTitle {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* The color to use for the title.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color?: Color;
render() {

9
core/src/components/title/usage/javascript.md Normal file
View File

@ -0,0 +1,9 @@
```html
<ion-header>
<ion-toolbar>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>
```

7
core/src/components/toast-controller/readme.md
View File

@ -1,5 +1,6 @@
# ion-toast-controller
ToastController is a component use to create Toast components. Please see the docs for [Toast](../toast).
<!-- Auto Generated Below -->
@ -9,12 +10,18 @@
#### create()
Create a toast overlay with toast options.
#### dismiss()
Dismiss the open toast overlay.
#### getTop()
Get the most recently opened toast overlay.
----------------------------------------------

6
core/src/components/toast-controller/toast-controller.tsx
View File

@ -28,7 +28,7 @@ export class ToastController implements OverlayController {
removeLastOverlay(this.toasts);
}
/*
/**
* Create a toast overlay with toast options.
*/
@Method()
@ -36,7 +36,7 @@ export class ToastController implements OverlayController {
return createOverlay(this.doc.createElement('ion-toast'), opts);
}
/*
/**
* Dismiss the open toast overlay.
*/
@Method()
@ -44,7 +44,7 @@ export class ToastController implements OverlayController {
return dismissOverlay(data, role, this.toasts, toastId);
}
/*
/**
* Get the most recently opened toast overlay.
*/
@Method()

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

@ -34,7 +34,11 @@ export class Toast implements OverlayInterface {
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config!: Config;
/** @hidden */
@Prop() overlayId!: number;
/** @hidden */
@Prop() keyboardClose = false;
/**

8
core/src/components/toolbar/readme.md
View File

@ -30,9 +30,8 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
string
The color to use from your Sass `$colors` map.
The color to use for the background.
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
@ -41,7 +40,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).
#### translucent
@ -60,9 +58,8 @@ Defaults to `false`.
string
The color to use from your Sass `$colors` map.
The color to use for the background.
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
@ -71,7 +68,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).
#### translucent

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

@ -18,16 +18,14 @@ export class Toolbar {
@Prop({ context: 'config' }) config!: Config;
/**
* The color to use from your Sass `$colors` map.
* The color to use for the background.
* 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;
/**
* 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;