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

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

@ -1,88 +1,7 @@
# ion-tabs
Tabs make it easy to navigate between different pages or functional
aspects of an app. The Tabs component, written as `<ion-tabs>`, is
a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
is a declarative component for a [NavController](../../../navigation/NavController/)
For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
take a look at the [NavController API Docs](../../../navigation/NavController/).
### Placement
The position of the tabs relative to the content varies based on
the mode. The tabs are placed at the bottom of the screen
for iOS and Android, and at the top for Windows by default. The position can
be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
or in an app's [config](../../config/Config/).
See the [Input Properties](#input-properties) below for the available
values of `tabsPlacement`.
### Layout
The layout for all of the tabs can be defined using the `tabsLayout`
property. If the individual tab has a title and icon, the icons will
show on top of the title by default. All tabs can be changed by setting
the value of `tabsLayout` on the `<ion-tabs>` element, or in your
app's [config](../../config/Config/). For example, this is useful if
you want to show tabs with a title only on Android, but show icons
and a title for iOS. See the [Input Properties](#input-properties)
below for the available values of `tabsLayout`.
### Selecting a Tab
There are different ways you can select a specific tab from the tabs
component. You can use the `selectedIndex` property to set the index
on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
instance after creation. See [usage](#usage) below for more information.
You can add a basic tabs template to a `@Component` using the following
template:
```html
<ion-tabs>
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
By default, the first tab will be selected upon navigation to the
Tabs page. We can change the selected tab by using `selectedIndex`
on the `<ion-tabs>` element:
```html
<ion-tabs selectedIndex="2">
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
```html
<ion-tabs #myTabs>
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
```
Then in your class you can grab the `Tabs` instance and call `select()`,
passing the index of the tab as the argument. Here we're grabbing the tabs
by using ViewChild.
You can also switch tabs from a child component by calling `select()` on the
parent view using the `NavController` instance. For example, assuming you have
a `TabsPage` component, you could call the following from any of the child
components to switch to `TabsRoot3`:
Tabs are a top level navigation component for created multiple stacked navs.
The component is a container of individual [Tab](../Tab/) components.
<!-- Auto Generated Below -->
@ -96,7 +15,6 @@ string
The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### name
@ -110,6 +28,8 @@ A unique name for the tabs
boolean
If the tabs should be scrollable
#### tabbarHidden
@ -153,6 +73,9 @@ Defaults to `false`.
boolean
If the tabs should use the router or not.
If true, `selectedTab` does nothing.
## Attributes
@ -162,7 +85,6 @@ string
The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### name
@ -176,6 +98,8 @@ A unique name for the tabs
boolean
If the tabs should be scrollable
#### tabbar-hidden
@ -219,6 +143,9 @@ Defaults to `false`.
boolean
If the tabs should use the router or not.
If true, `selectedTab` does nothing.
## Events
@ -243,12 +170,18 @@ Emitted when the tab changes.
#### getSelected()
Get the currently selected tab
#### getTab()
Get the tab at the given index
#### select()
Index or the Tab instance, of the tab to select.
#### setRouteId()

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

@ -25,7 +25,6 @@ export class Tabs implements NavOutlet {
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color?: Color;
@ -62,8 +61,13 @@ export class Tabs implements NavOutlet {
*/
@Prop() translucent = false;
/** If the tabs should be scrollable */
@Prop() scrollable = false;
/**
* If the tabs should use the router or not.
* If true, `selectedTab` does nothing.
*/
@Prop({ mutable: true }) useRouter = false;
/**
@ -110,7 +114,7 @@ export class Tabs implements NavOutlet {
}
/**
* @param {number|Tab} tabOrIndex Index, or the Tab instance, of the tab to select.
* Index or the Tab instance, of the tab to select.
*/
@Method()
async select(tabOrIndex: number | HTMLIonTabElement): Promise<boolean> {
@ -125,6 +129,7 @@ export class Tabs implements NavOutlet {
return true;
}
/** @hidden */
@Method()
async setRouteId(id: string): Promise<RouteWrite> {
const selectedTab = this.getTab(id);
@ -140,12 +145,14 @@ export class Tabs implements NavOutlet {
};
}
/** @hidden */
@Method()
getRouteId(): RouteID|undefined {
const id = this.selectedTab && this.selectedTab.getTabId();
return id ? {id, element: this.selectedTab} : undefined;
}
/** Get the tab at the given index */
@Method()
getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement|undefined {
if (typeof tabOrIndex === 'string') {
@ -158,7 +165,7 @@ export class Tabs implements NavOutlet {
}
/**
* @return {HTMLIonTabElement} Returns the currently selected tab
* Get the currently selected tab
*/
@Method()
getSelected(): HTMLIonTabElement | undefined {

16
core/src/components/tabs/usage/angular.md Normal file
View File

@ -0,0 +1,16 @@
```html
<ion-tabs>
<ion-tab label="Schedule" icon="calendar" href="/app/tabs/(schedule:schedule)">
<ion-router-outlet stack name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab label="Speakers" icon="contacts" href="/app/tabs/(speakers:speakers)">
<ion-router-outlet stack name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab label="Map" icon="map" href="/app/tabs/(map:map)">
<ion-router-outlet stack name="map"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" href="/app/tabs/(about:about)">
<ion-router-outlet stack name="about"></ion-router-outlet>
</ion-tab>
</ion-tabs>
```

12
core/src/components/tabs/usage/javascript.md Normal file
View File

@ -0,0 +1,12 @@
```html
<ion-tabs>
<ion-tab label="schedule" icon="calendar" name="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab label="speakers" icon="contacts" name="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab label="map" icon="map" component="page-map"></ion-tab>
<ion-tab label="about" icon="information-circle" component="page-about"></ion-tab>
</ion-tabs>
```