javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

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

@@ -1,7 +1,7 @@
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: SpinnerTypes | 'hide';
spinner?: SpinnerTypes | null;
message?: string;
cssClass?: string | string[];
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.
*/
@Prop({ mutable: true }) spinner?: SpinnerTypes | 'hide';
@Prop({ mutable: true }) spinner?: SpinnerTypes | null;
/**
* If `true`, the loading indicator will be translucent.
@@ -203,7 +203,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
return [
<ion-backdrop visible={this.showBackdrop} tappable={false} />,
<div class="loading-wrapper" role="dialog">
{this.spinner !== 'hide' && (
{this.spinner && (
<div class="loading-spinner">
<ion-spinner name={this.spinner} />
</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
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
| `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` |
| `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` |
| `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` |
| `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` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `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` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `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` |
| `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` |
| `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` |
| `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` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `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" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` |
## 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="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: '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, 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>

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="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: '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, 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>

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

@@ -13,7 +13,7 @@
<body>
<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: '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, 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() {
const loading = await this.loadingController.create({
spinner: 'hide',
spinner: null,
duration: 5000,
message: 'Please wait...',
translucent: true,

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

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