mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user