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

docs(): usage and examples

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

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

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

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

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