mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
docs(all): add global config docs (#16193)
* docs(all): add global config docs fixes #16109 * lint issue * add tabButtonLayout * tabs docs
This commit is contained in:
Manu MA
38
core/src/components.d.ts
vendored
38
core/src/components.d.ts
vendored
@ -56,9 +56,9 @@ import {
|
||||
Side,
|
||||
SpinnerTypes,
|
||||
StyleEvent,
|
||||
TabbarChangedDetail,
|
||||
TabbarClickDetail,
|
||||
TabbarLayout,
|
||||
TabBarChangedDetail,
|
||||
TabButtonClickDetail,
|
||||
TabButtonLayout,
|
||||
TextFieldTypes,
|
||||
TextInputChangeEvent,
|
||||
ToastOptions,
|
||||
@ -1632,7 +1632,7 @@ export namespace Components {
|
||||
/**
|
||||
* An animated SVG spinner that shows while loading.
|
||||
*/
|
||||
'loadingSpinner'?: SpinnerTypes;
|
||||
'loadingSpinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* Optional text to display while loading.
|
||||
*/
|
||||
@ -1642,7 +1642,7 @@ export namespace Components {
|
||||
/**
|
||||
* An animated SVG spinner that shows while loading.
|
||||
*/
|
||||
'loadingSpinner'?: SpinnerTypes;
|
||||
'loadingSpinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* Optional text to display while loading.
|
||||
*/
|
||||
@ -2316,7 +2316,7 @@ export namespace Components {
|
||||
/**
|
||||
* The name of the spinner to display.
|
||||
*/
|
||||
'spinner'?: SpinnerTypes | 'hide';
|
||||
'spinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* If `true`, the loading indicator will be translucent.
|
||||
*/
|
||||
@ -2391,7 +2391,7 @@ export namespace Components {
|
||||
/**
|
||||
* The name of the spinner to display.
|
||||
*/
|
||||
'spinner'?: SpinnerTypes | 'hide';
|
||||
'spinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
'pullingIcon'?: string;
|
||||
'pullingIcon'?: string | null;
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
'refreshingSpinner'?: SpinnerTypes;
|
||||
'refreshingSpinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
'pullingIcon'?: string;
|
||||
'pullingIcon'?: string | null;
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
'refreshingSpinner'?: SpinnerTypes;
|
||||
'refreshingSpinner'?: SpinnerTypes | null;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'layout': TabbarLayout;
|
||||
'layout': TabButtonLayout;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'layout'?: TabbarLayout;
|
||||
'layout'?: TabButtonLayout;
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
'onIonTabBarChanged'?: (event: CustomEvent<TabbarChangedDetail>) => void;
|
||||
'onIonTabBarChanged'?: (event: CustomEvent<TabBarChangedDetail>) => void;
|
||||
/**
|
||||
* The selected tab component
|
||||
*/
|
||||
@ -4494,9 +4494,9 @@ export namespace Components {
|
||||
*/
|
||||
'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.
|
||||
*/
|
||||
@ -4520,9 +4520,9 @@ export namespace Components {
|
||||
*/
|
||||
'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.
|
||||
*/
|
||||
@ -4530,7 +4530,7 @@ export namespace Components {
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
@ -19,7 +19,7 @@ export class InfiniteScrollContent implements ComponentInterface {
|
||||
/**
|
||||
* 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.
|
||||
|
||||
@ -7,10 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
|
||||
|
||||
## Properties
|
||||
|
||||
| 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` |
|
||||
| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------------- | ----------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `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` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------- | -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
|
||||
| `pullingIcon` | `pulling-icon` | A static icon 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` |
|
||||
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------- | -------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `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` |
|
||||
| `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` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@ -12,7 +12,7 @@ export class RefresherContent implements ComponentInterface {
|
||||
/**
|
||||
* 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
|
||||
@ -22,14 +22,14 @@ export class RefresherContent implements ComponentInterface {
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
@Prop() refreshingText?: string;
|
||||
|
||||
componentDidLoad() {
|
||||
componentWillLoad() {
|
||||
if (this.pullingIcon === undefined) {
|
||||
this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
|
||||
}
|
||||
|
||||
@ -108,7 +108,9 @@ export class SplitPane implements ComponentInterface {
|
||||
}
|
||||
|
||||
// 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);
|
||||
mediaList.addListener(callback);
|
||||
this.rmL = () => mediaList.removeListener(callback);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
export interface TabbarClickDetail {
|
||||
export interface TabButtonClickDetail {
|
||||
tab?: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
// iOS Translucent Tabbar
|
||||
// iOS Translucent Tab bar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.tabbar-translucent) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
@ -35,7 +35,7 @@ export class TabBar implements ComponentInterface {
|
||||
/**
|
||||
* 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
|
||||
@ -54,7 +54,7 @@ export class TabBar implements ComponentInterface {
|
||||
@Prop() translucent = false;
|
||||
|
||||
/** @internal */
|
||||
@Event() ionTabBarChanged!: EventEmitter<TabbarChangedDetail>;
|
||||
@Event() ionTabBarChanged!: EventEmitter<TabBarChangedDetail>;
|
||||
|
||||
@Listen('body:keyboardWillHide')
|
||||
protected onKeyboardWillHide() {
|
||||
|
||||
@ -10,14 +10,14 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
|
||||
|
||||
## Properties
|
||||
|
||||
| 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` |
|
||||
| `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` |
|
||||
| `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'` |
|
||||
| `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` |
|
||||
| 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` |
|
||||
| `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` |
|
||||
| `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` |
|
||||
| `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` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
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 { TabbarChangedDetail } from '../tab-bar/tab-bar-interface';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-button',
|
||||
@ -18,6 +17,7 @@ export class TabButton implements ComponentInterface {
|
||||
|
||||
@Prop({ context: 'queue' }) queue!: QueueApi;
|
||||
@Prop({ context: 'document' }) doc!: Document;
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
|
||||
/**
|
||||
* The selected tab component
|
||||
@ -37,9 +37,10 @@ export class TabButton implements ComponentInterface {
|
||||
@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.
|
||||
@ -61,10 +62,10 @@ export class TabButton implements ComponentInterface {
|
||||
* Emitted when the tab bar is clicked
|
||||
* @internal
|
||||
*/
|
||||
@Event() ionTabButtonClick!: EventEmitter<TabbarClickDetail>;
|
||||
@Event() ionTabButtonClick!: EventEmitter<TabButtonClickDetail>;
|
||||
|
||||
@Listen('parent:ionTabBarChanged')
|
||||
onTabbarChanged(ev: CustomEvent<TabbarChangedDetail>) {
|
||||
onTabBarChanged(ev: CustomEvent<TabBarChangedDetail>) {
|
||||
this.selected = this.tab === ev.detail.tab;
|
||||
}
|
||||
|
||||
@ -80,6 +81,9 @@ export class TabButton implements ComponentInterface {
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
if (this.layout === undefined) {
|
||||
this.layout = this.config.get('tabButtonLayout', 'icon-top');
|
||||
}
|
||||
if (this.tab === undefined) {
|
||||
console.warn(`ion-tab-button needs a tab name, so it can be selected.
|
||||
<ion-tab-button tab="TAB_NAME">`);
|
||||
|
||||
@ -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-label>Home</ion-label>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="settings">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
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({
|
||||
tag: 'ion-tabs',
|
||||
@ -58,15 +58,15 @@ export class Tabs implements NavOutlet {
|
||||
}
|
||||
|
||||
componentWillUpdate() {
|
||||
const tabbar = this.el.querySelector('ion-tab-bar');
|
||||
if (tabbar) {
|
||||
const tabBar = this.el.querySelector('ion-tab-bar');
|
||||
if (tabBar) {
|
||||
const tab = this.selectedTab ? this.selectedTab.tab : undefined;
|
||||
tabbar.selectedTab = tab;
|
||||
tabBar.selectedTab = tab;
|
||||
}
|
||||
}
|
||||
|
||||
@Listen('ionTabButtonClick')
|
||||
protected onTabClicked(ev: CustomEvent<TabbarClickDetail>) {
|
||||
protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
|
||||
const { href, tab } = ev.detail;
|
||||
const selectedTab = this.tabs.find(t => t.tab === tab);
|
||||
if (this.useRouter && href !== undefined) {
|
||||
|
||||
@ -1,28 +1,6 @@
|
||||
```html
|
||||
<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-router-outlet name="schedule"></ion-router-outlet>
|
||||
</ion-tab>
|
||||
@ -39,5 +17,27 @@
|
||||
<ion-router-outlet name="about"></ion-router-outlet>
|
||||
</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>
|
||||
```
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
<ion-tab-button tab="tab-schedule">
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
<ion-label>Schedule</ion-label>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="tab-speaker">
|
||||
<ion-icon name="contacts"></ion-icon>
|
||||
|
||||
@ -1,55 +1,174 @@
|
||||
import { AnimationBuilder, Mode } from '../interface';
|
||||
import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface';
|
||||
|
||||
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;
|
||||
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;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
inputShims?: boolean;
|
||||
/**
|
||||
* Overrides the default icon in all `<ion-back-button>` components.
|
||||
*/
|
||||
backButtonIcon?: string;
|
||||
|
||||
/**
|
||||
* Overrides the default text in all `<ion-back-button>` components.
|
||||
*/
|
||||
backButtonText?: string;
|
||||
spinner?: string;
|
||||
loadingSpinner?: string;
|
||||
|
||||
/**
|
||||
* Overrides the default icon in all `<ion-menu-button>` components.
|
||||
*/
|
||||
menuIcon?: string;
|
||||
animated?: boolean;
|
||||
pickerSpinner?: string;
|
||||
refreshingIcon?: string;
|
||||
refreshingSpinner?: string;
|
||||
|
||||
/**
|
||||
* Overrides the default menu type for all `<ion-menu>` components.
|
||||
* By default the menu type is chosen based in the app's mode.
|
||||
*/
|
||||
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;
|
||||
inputBlurring?: string;
|
||||
scrollAssist?: boolean;
|
||||
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;
|
||||
_testing?: boolean;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user