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

docs(all): add global config docs (#16193)

Browse Source 
* docs(all): add global config docs

fixes #16109

* lint issue

* add tabButtonLayout

* tabs docs
This commit is contained in:
Manu MA
2018-11-02 17:30:37 +01:00
committed by GitHub
parent bc57ca9415
commit 0680fe9251
24 changed files with 267 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,9 +56,9 @@ import {
Side, Side,
SpinnerTypes, SpinnerTypes,
StyleEvent, StyleEvent,
TabbarChangedDetail, TabBarChangedDetail,
TabbarClickDetail, TabButtonClickDetail,
TabbarLayout, TabButtonLayout,
TextFieldTypes, TextFieldTypes,
TextInputChangeEvent, TextInputChangeEvent,
ToastOptions, ToastOptions,
@ -1632,7 +1632,7 @@ export namespace Components {
/** /**
* An animated SVG spinner that shows while loading. * An animated SVG spinner that shows while loading.
*/ */
'loadingSpinner'?: SpinnerTypes; 'loadingSpinner'?: SpinnerTypes | null;
/** /**
* Optional text to display while loading. * Optional text to display while loading.
*/ */
@ -1642,7 +1642,7 @@ export namespace Components {
/** /**
* An animated SVG spinner that shows while loading. * An animated SVG spinner that shows while loading.
*/ */
'loadingSpinner'?: SpinnerTypes; 'loadingSpinner'?: SpinnerTypes | null;
/** /**
* Optional text to display while loading. * Optional text to display while loading.
*/ */
@ -2316,7 +2316,7 @@ export namespace Components {
/** /**
* The name of the spinner to display. * The name of the spinner to display.
*/ */
'spinner'?: SpinnerTypes | 'hide'; 'spinner'?: SpinnerTypes | null;
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent.
*/ */
@ -2391,7 +2391,7 @@ export namespace Components {
/** /**
* The name of the spinner to display. * The name of the spinner to display.
*/ */
'spinner'?: SpinnerTypes | 'hide'; 'spinner'?: SpinnerTypes | null;
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent.
*/ */
@ -3492,7 +3492,7 @@ export namespace Components {
/** /**
* A static icon to display when you begin to pull down * A static icon to display when you begin to pull down
*/ */
'pullingIcon'?: string; 'pullingIcon'?: string | null;
/** /**
* The text you want to display when you begin to pull down * The text you want to display when you begin to pull down
*/ */
@ -3500,7 +3500,7 @@ export namespace Components {
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
*/ */
'refreshingSpinner'?: SpinnerTypes; 'refreshingSpinner'?: SpinnerTypes | null;
/** /**
* The text you want to display when performing a refresh * The text you want to display when performing a refresh
*/ */
@ -3510,7 +3510,7 @@ export namespace Components {
/** /**
* A static icon to display when you begin to pull down * A static icon to display when you begin to pull down
*/ */
'pullingIcon'?: string; 'pullingIcon'?: string | null;
/** /**
* The text you want to display when you begin to pull down * The text you want to display when you begin to pull down
*/ */
@ -3518,7 +3518,7 @@ export namespace Components {
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
*/ */
'refreshingSpinner'?: SpinnerTypes; 'refreshingSpinner'?: SpinnerTypes | null;
/** /**
* The text you want to display when performing a refresh * The text you want to display when performing a refresh
*/ */
@ -4442,7 +4442,7 @@ export namespace Components {
/** /**
* Set the layout of the text and icon in the tab bar. * Set the layout of the text and icon in the tab bar.
*/ */
'layout': TabbarLayout; 'layout': TabButtonLayout;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -4464,12 +4464,12 @@ export namespace Components {
/** /**
* Set the layout of the text and icon in the tab bar. * Set the layout of the text and icon in the tab bar.
*/ */
'layout'?: TabbarLayout; 'layout'?: TabButtonLayout;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
'mode'?: Mode; 'mode'?: Mode;
'onIonTabBarChanged'?: (event: CustomEvent<TabbarChangedDetail>) => void; 'onIonTabBarChanged'?: (event: CustomEvent<TabBarChangedDetail>) => void;
/** /**
* The selected tab component * The selected tab component
*/ */
@ -4494,9 +4494,9 @@ export namespace Components {
*/ */
'href'?: string; 'href'?: string;
/** /**
* Set the layout of the text and icon in the tabbar. * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
*/ */
'layout': TabbarLayout; 'layout'?: TabButtonLayout;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -4520,9 +4520,9 @@ export namespace Components {
*/ */
'href'?: string; 'href'?: string;
/** /**
* Set the layout of the text and icon in the tabbar. * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
*/ */
'layout'?: TabbarLayout; 'layout'?: TabButtonLayout;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -4530,7 +4530,7 @@ export namespace Components {
/** /**
* Emitted when the tab bar is clicked * Emitted when the tab bar is clicked
*/ */
'onIonTabButtonClick'?: (event: CustomEvent<TabbarClickDetail>) => void; 'onIonTabButtonClick'?: (event: CustomEvent<TabButtonClickDetail>) => void;
/** /**
* A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
*/ */

2
core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View File

@ -19,7 +19,7 @@ export class InfiniteScrollContent implements ComponentInterface {
/** /**
* An animated SVG spinner that shows while loading. * An animated SVG spinner that shows while loading.
*/ */
@Prop({ mutable: true }) loadingSpinner?: SpinnerTypes; @Prop({ mutable: true }) loadingSpinner?: SpinnerTypes | null;
/** /**
* Optional text to display while loading. * Optional text to display while loading.

8
core/src/components/infinite-scroll-content/readme.md
View File

@ -7,10 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | | ---------------- | ----------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` | | `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` | | `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` |
---------------------------------------------- ----------------------------------------------

2
core/src/components/loading/loading-interface.ts
View File

@ -1,7 +1,7 @@
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions { export interface LoadingOptions {
spinner?: SpinnerTypes | 'hide'; spinner?: SpinnerTypes | null;
message?: string; message?: string;
cssClass?: string | string[]; cssClass?: string | string[];
showBackdrop?: boolean; showBackdrop?: boolean;

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

@ -79,7 +79,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
/** /**
* The name of the spinner to display. * The name of the spinner to display.
*/ */
@Prop({ mutable: true }) spinner?: SpinnerTypes | 'hide'; @Prop({ mutable: true }) spinner?: SpinnerTypes | null;
/** /**
* If `true`, the loading indicator will be translucent. * If `true`, the loading indicator will be translucent.
@ -203,7 +203,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
return [ return [
<ion-backdrop visible={this.showBackdrop} tappable={false} />, <ion-backdrop visible={this.showBackdrop} tappable={false} />,
<div class="loading-wrapper" role="dialog"> <div class="loading-wrapper" role="dialog">
{this.spinner !== 'hide' && ( {this.spinner && (
<div class="loading-spinner"> <div class="loading-spinner">
<ion-spinner name={this.spinner} /> <ion-spinner name={this.spinner} />
</div> </div>

30
core/src/components/loading/readme.md
View File

@ -18,21 +18,21 @@ The loading indicator can be dismissed automatically after a specific amount of
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | | `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | | `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` | | `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | | `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "hide" \| "lines" \| "lines-small" \| undefined` | `undefined` | | `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` |
## Events ## Events

2
core/src/components/loading/test/basic/index.html
View File

@ -23,7 +23,7 @@
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button> <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button> <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>

2
core/src/components/loading/test/preview/index.html
View File

@ -23,7 +23,7 @@
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button> <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button> <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button> <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>

2
core/src/components/loading/test/standalone/index.html
View File

@ -13,7 +13,7 @@
<body> <body>
<button id="basic" onclick="presentLoading()">Show Loading</button> <button id="basic" onclick="presentLoading()">Show Loading</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button> <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button> <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button> <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button> <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>

2
core/src/components/loading/usage/angular.md
View File

@ -20,7 +20,7 @@ export class LoadingExample {
async presentLoadingWithOptions() { async presentLoadingWithOptions() {
const loading = await this.loadingController.create({ const loading = await this.loadingController.create({
spinner: 'hide', spinner: null,
duration: 5000, duration: 5000,
message: 'Please wait...', message: 'Please wait...',
translucent: true, translucent: true,

2
core/src/components/loading/usage/javascript.md
View File

@ -15,7 +15,7 @@ async function presentLoadingWithOptions() {
await loadingController.componentOnReady(); await loadingController.componentOnReady();
const loading = await loadingController.create({ const loading = await loadingController.create({
spinner: 'hide', spinner: null,
duration: 5000, duration: 5000,
message: 'Please wait...', message: 'Please wait...',
translucent: true, translucent: true,

12
core/src/components/refresher-content/readme.md
View File

@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | | ------------------- | -------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string \| undefined` | `undefined` | | `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | `undefined` | | `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | `undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` | | `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` | | `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` |
---------------------------------------------- ----------------------------------------------

6
core/src/components/refresher-content/refresher-content.tsx
View File

@ -12,7 +12,7 @@ export class RefresherContent implements ComponentInterface {
/** /**
* A static icon to display when you begin to pull down * A static icon to display when you begin to pull down
*/ */
@Prop({ mutable: true }) pullingIcon?: string; @Prop({ mutable: true }) pullingIcon?: string | null;
/** /**
* The text you want to display when you begin to pull down * The text you want to display when you begin to pull down
@ -22,14 +22,14 @@ export class RefresherContent implements ComponentInterface {
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
*/ */
@Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes; @Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes | null;
/** /**
* The text you want to display when performing a refresh * The text you want to display when performing a refresh
*/ */
@Prop() refreshingText?: string; @Prop() refreshingText?: string;
componentDidLoad() { componentWillLoad() {
if (this.pullingIcon === undefined) { if (this.pullingIcon === undefined) {
this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down'); this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
} }

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

@ -108,7 +108,9 @@ export class SplitPane implements ComponentInterface {
} }
// Listen on media query // Listen on media query
const callback = (q: MediaQueryList) => this.visible = q.matches; const callback = (q: MediaQueryList) => {
this.visible = q.matches;
};
const mediaList = this.win.matchMedia(mediaQuery); const mediaList = this.win.matchMedia(mediaQuery);
mediaList.addListener(callback); mediaList.addListener(callback);
this.rmL = () => mediaList.removeListener(callback); this.rmL = () => mediaList.removeListener(callback);

6
core/src/components/tab-bar/tab-bar-interface.ts
View File

@ -1,10 +1,10 @@
export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide'; export type TabButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
export interface TabbarChangedDetail { export interface TabBarChangedDetail {
tab?: string; tab?: string;
} }
export interface TabbarClickDetail { export interface TabButtonClickDetail {
tab?: string; tab?: string;
href?: string; href?: string;
} }

2
core/src/components/tab-bar/tab-bar.ios.scss
View File

@ -12,7 +12,7 @@
height: 50px; height: 50px;
} }
// iOS Translucent Tabbar // iOS Translucent Tab bar
// -------------------------------------------------- // --------------------------------------------------
:host(.tabbar-translucent) { :host(.tabbar-translucent) {

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

@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Color, Mode, TabbarChangedDetail, TabbarLayout } from '../../interface'; import { Color, Mode, TabBarChangedDetail, TabButtonLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';
@Component({ @Component({
@ -35,7 +35,7 @@ export class TabBar implements ComponentInterface {
/** /**
* Set the layout of the text and icon in the tab bar. * Set the layout of the text and icon in the tab bar.
*/ */
@Prop() layout: TabbarLayout = 'icon-top'; @Prop() layout: TabButtonLayout = 'icon-top';
/** /**
* The selected tab component * The selected tab component
@ -54,7 +54,7 @@ export class TabBar implements ComponentInterface {
@Prop() translucent = false; @Prop() translucent = false;
/** @internal */ /** @internal */
@Event() ionTabBarChanged!: EventEmitter<TabbarChangedDetail>; @Event() ionTabBarChanged!: EventEmitter<TabBarChangedDetail>;
@Listen('body:keyboardWillHide') @Listen('body:keyboardWillHide')
protected onKeyboardWillHide() { protected onKeyboardWillHide() {

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

@ -10,14 +10,14 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` | | `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` | | `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tabbar. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `'icon-top'` | | `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` | | `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` |
---------------------------------------------- ----------------------------------------------

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

@ -1,8 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core'; import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
import { Color, Mode, TabbarClickDetail, TabbarLayout } from '../../interface'; import { Color, Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';
import { TabbarChangedDetail } from '../tab-bar/tab-bar-interface';
@Component({ @Component({
tag: 'ion-tab-button', tag: 'ion-tab-button',
@ -18,6 +17,7 @@ export class TabButton implements ComponentInterface {
@Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'document' }) doc!: Document; @Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'config' }) config!: Config;
/** /**
* The selected tab component * The selected tab component
@ -37,9 +37,10 @@ export class TabButton implements ComponentInterface {
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* Set the layout of the text and icon in the tabbar. * Set the layout of the text and icon in the tab bar.
* It defaults to `'icon-top'`.
*/ */
@Prop() layout: TabbarLayout = 'icon-top'; @Prop() layout?: TabButtonLayout;
/** /**
* The URL which will be used as the `href` within this tab's button anchor. * The URL which will be used as the `href` within this tab's button anchor.
@ -61,10 +62,10 @@ export class TabButton implements ComponentInterface {
* Emitted when the tab bar is clicked * Emitted when the tab bar is clicked
* @internal * @internal
*/ */
@Event() ionTabButtonClick!: EventEmitter<TabbarClickDetail>; @Event() ionTabButtonClick!: EventEmitter<TabButtonClickDetail>;
@Listen('parent:ionTabBarChanged') @Listen('parent:ionTabBarChanged')
onTabbarChanged(ev: CustomEvent<TabbarChangedDetail>) { onTabBarChanged(ev: CustomEvent<TabBarChangedDetail>) {
this.selected = this.tab === ev.detail.tab; this.selected = this.tab === ev.detail.tab;
} }
@ -80,6 +81,9 @@ export class TabButton implements ComponentInterface {
} }
componentWillLoad() { componentWillLoad() {
if (this.layout === undefined) {
this.layout = this.config.get('tabButtonLayout', 'icon-top');
}
if (this.tab === undefined) { if (this.tab === undefined) {
console.warn(`ion-tab-button needs a tab name, so it can be selected. console.warn(`ion-tab-button needs a tab name, so it can be selected.
<ion-tab-button tab="TAB_NAME">`); <ion-tab-button tab="TAB_NAME">`);

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

@ -17,6 +17,7 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion
<ion-tab-button tab="home"> <ion-tab-button tab="home">
<ion-label>Home</ion-label> <ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon> <ion-icon name="home"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="settings"> <ion-tab-button tab="settings">

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

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Config, NavOutlet, RouteID, RouteWrite, TabbarClickDetail } from '../../interface'; import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickDetail } from '../../interface';
@Component({ @Component({
tag: 'ion-tabs', tag: 'ion-tabs',
@ -58,15 +58,15 @@ export class Tabs implements NavOutlet {
} }
componentWillUpdate() { componentWillUpdate() {
const tabbar = this.el.querySelector('ion-tab-bar'); const tabBar = this.el.querySelector('ion-tab-bar');
if (tabbar) { if (tabBar) {
const tab = this.selectedTab ? this.selectedTab.tab : undefined; const tab = this.selectedTab ? this.selectedTab.tab : undefined;
tabbar.selectedTab = tab; tabBar.selectedTab = tab;
} }
} }
@Listen('ionTabButtonClick') @Listen('ionTabButtonClick')
protected onTabClicked(ev: CustomEvent<TabbarClickDetail>) { protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
const { href, tab } = ev.detail; const { href, tab } = ev.detail;
const selectedTab = this.tabs.find(t => t.tab === tab); const selectedTab = this.tabs.find(t => t.tab === tab);
if (this.useRouter && href !== undefined) { if (this.useRouter && href !== undefined) {

44
core/src/components/tabs/usage/angular.md
View File

@ -1,28 +1,6 @@
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="schedule"> <ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet> <ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab> </ion-tab>
@ -39,5 +17,27 @@
<ion-router-outlet name="about"></ion-router-outlet> <ion-router-outlet name="about"></ion-router-outlet>
</ion-tab> </ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs> </ion-tabs>
``` ```

1
core/src/components/tabs/usage/javascript.md
View File

@ -13,6 +13,7 @@
<ion-tab-button tab="tab-schedule"> <ion-tab-button tab="tab-schedule">
<ion-icon name="calendar"></ion-icon> <ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label> <ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="tab-speaker"> <ion-tab-button tab="tab-speaker">
<ion-icon name="contacts"></ion-icon> <ion-icon name="contacts"></ion-icon>

189
core/src/utils/config.ts
View File

@ -1,55 +1,174 @@
import { AnimationBuilder, Mode } from '../interface'; import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface';
export interface IonicConfig { export interface IonicConfig {
/** /**
* The mode determines which platform styles to use. * When it's set to `false`, disables all animation and transition across the app.
* Can be useful to make ionic smoother in slow devices, when animations can't run smoothly.
*/
animated?: boolean;
/**
* The mode determines which platform styles to use for the whole application.
*/ */
mode?: Mode; mode?: Mode;
persistConfig?: boolean;
/**
* Wherever ionic will respond to hardware go back buttons in an Android device.
* Defaults to `true` when ionic runs in a mobile device.
*/
hardwareBackButton?: boolean; hardwareBackButton?: boolean;
/**
* Whenever clicking the top status bar should cause the scroll to top in an application.
* Defaults to `true` when ionic runs in a mobile device.
*/
statusTap?: boolean; statusTap?: boolean;
inputShims?: boolean; /**
* Overrides the default icon in all `<ion-back-button>` components.
*/
backButtonIcon?: string; backButtonIcon?: string;
/**
* Overrides the default text in all `<ion-back-button>` components.
*/
backButtonText?: string; backButtonText?: string;
spinner?: string;
loadingSpinner?: string; /**
* Overrides the default icon in all `<ion-menu-button>` components.
*/
menuIcon?: string; menuIcon?: string;
animated?: boolean;
pickerSpinner?: string; /**
refreshingIcon?: string; * Overrides the default menu type for all `<ion-menu>` components.
refreshingSpinner?: string; * By default the menu type is chosen based in the app's mode.
*/
menuType?: string; menuType?: string;
/**
* Overrides the default spinner in all `<ion-spinner>` components.
* By default the spinner type is chosen based in the mode (ios or md).
*/
spinner?: SpinnerTypes;
/**
* Overrides the default spinner for all `ion-loading` overlays, ie. the ones
* created with `ion-loading-controller`.
*/
loadingSpinner?: SpinnerTypes | null;
/**
* Overrides the default icon in all `<ion-refresh-content>` components.
*/
refreshingIcon?: string;
/**
* Overrides the default spinner type in all `<ion-refresh-content>` components.
*/
refreshingSpinner?: SpinnerTypes | null;
/**
* Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.
*/
infiniteLoadingSpinner?: SpinnerTypes | null;
/**
* Global switch that disables or enables "swipe-to-go-back" gesture across all
* `ion-nav` in your application.
*/
swipeBackEnabled?: boolean;
/**
* Overrides the default "layout" of all `ion-bar-button` across the whole application.
*/
tabButtonLayout?: TabButtonLayout;
/**
* Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
* This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.
*/
navAnimation?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".
*/
actionSheetEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-alert`, overriding the default "animation".
*/
alertEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-loading`, overriding the default "animation".
*/
loadingEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-modal`, overriding the default "animation".
*/
modalEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-popover`, overriding the default "animation".
*/
popoverEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-toast`, overriding the default "animation".
*/
toastEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-picker`, overriding the default "animation".
*/
pickerEnter?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".
*/
actionSheetLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-alert`, overriding the default "animation".
*/
alertLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-loading`, overriding the default "animation".
*/
loadingLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-modal`, overriding the default "animation".
*/
modalLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-popover`, overriding the default "animation".
*/
popoverLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-toast`, overriding the default "animation".
*/
toastLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-picker`, overriding the default "animation".
*/
pickerLeave?: AnimationBuilder;
// PRIVATE configs
keyboardHeight?: number;
inputShims?: boolean;
scrollPadding?: string; scrollPadding?: string;
inputBlurring?: string; inputBlurring?: string;
scrollAssist?: boolean; scrollAssist?: boolean;
hideCaretOnScroll?: string; hideCaretOnScroll?: string;
infiniteLoadingSpinner?: string;
keyboardHeight?: number;
swipeBackEnabled?: boolean;
tabbarPlacement?: string;
tabbarLayout?: string;
tabbarHighlight?: boolean;
navAnimation?: AnimationBuilder;
actionSheetEnter?: AnimationBuilder;
alertEnter?: AnimationBuilder;
loadingEnter?: AnimationBuilder;
modalEnter?: AnimationBuilder;
popoverEnter?: AnimationBuilder;
toastEnter?: AnimationBuilder;
pickerEnter?: AnimationBuilder;
actionSheetLeave?: AnimationBuilder;
alertLeave?: AnimationBuilder;
loadingLeave?: AnimationBuilder;
modalLeave?: AnimationBuilder;
popoverLeave?: AnimationBuilder;
toastLeave?: AnimationBuilder;
pickerLeave?: AnimationBuilder;
// INTERNAL configs
persistConfig?: boolean;
_forceStatusbarPadding?: boolean; _forceStatusbarPadding?: boolean;
_testing?: boolean; _testing?: boolean;
} }