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

docs(tabs): add more docs

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-10-31 17:40:31 +01:00
parent 6d11cc15f8
commit f23e6e97f1
2 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/tab-button/tab-button.tsx
View File

@ -82,7 +82,8 @@ export class TabButton implements ComponentInterface {
componentWillLoad() { componentWillLoad() {
if (this.tab === undefined) { if (this.tab === undefined) {
console.warn('ion-tab-button needs a tab, so it can be selected'); console.warn(`ion-tab-button needs a tab name, so it can be selected.
<ion-tab-button tab="TAB_NAME">`);
} }
} }

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

@ -1,13 +1,11 @@
# ion-tabs # ion-tabs
Tabs are a top level navigation component for created multiple stacked navs. Tabs are a top level navigation component to implement a tab-based navigation.
The component is a container of individual [Tab](../Tab/) components. The component is a container of individual [Tab](../Tab/) components.
`ion-tabs` is a styleless component that works as a router outlet in `ion-tabs` is a styleless component that works as a router outlet in order to handle navigation.
order to handle navigation. When the user does not provide a `ion-tab-bar` in their markup, `ion-tabs`, by default provides one. Notice that `ion-tab-bar` is the UI component that can be used to switch between tabs. This component does not provide any UI feedback or mechanism to switch between tabs.
In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`:
In order to customize the style of the `ion-tab-bar`, it should be included in the user's markup as
direct children of `ion-tabs`, like this:
```html ```html
<ion-tabs> <ion-tabs>
@ -30,6 +28,39 @@ direct children of `ion-tabs`, like this:
</ion-tabs> </ion-tabs>
``` ```
Note that both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that feels like a native app.
## The "tab" property
Each `ion-tab-button` will activate one of the tabs when tapped.
In order to link the button to the `ion-tab` container, a matching `tab` property must be used.
```html
<ion-tab tab="settings">
[...]
<ion-tab-button tab="settings">
```
This `ion-tab-button` and `ion-tab` are now linked by the common `tab` property.
The `tab` property identifies each tab, and it has to be unique within the scope of the same `ion-tabs`. It's very important to set the same property to `ion-tab` and `ion-tab-button`, even if you are only using one. e.g. You could use the `ion-tab-bar` without using `ion-tabs`. In this case you should still give each `ion-tab` the property of `tab="something"`.
### Router integration
When the ionic's router (`ion-router`) is used, the `tab` property matches the "component" of `ion-route`:
The following route within the scope of a `ion-tabs` outlet:
```html
<ion-route path="/settings-page" component="settings"></ion-route>
```
Would match the following tab:
```html
<ion-tab tab="settings" component="settings-component"></ion-tab>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->