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

fix(tabs): use slot instead of placement

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-11-01 19:26:05 +01:00
parent 1532bd2f48
commit 72f0a76a1f
17 changed files with 29 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/router/test/basic/index.html
View File

@@ -114,7 +114,7 @@
inline tab 4
</ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-one">
<ion-label>Plain List</ion-label>

7
core/src/components/tab-bar/readme.md
View File

@@ -2,7 +2,7 @@
Tab bar is the UI component that implements the array of button of `ion-tabs`. It's provided by default when `ion-tabs` is used, though, this "implicit" tab bar can not be customized.
In order to have a custom tabbar, it should be provided in user's markup as direct children of `ion-tabs`:
In order to have a custom tab bar, it should be provided in user's markup as direct children of `ion-tabs`:
```html
<style>
@@ -17,7 +17,7 @@ In order to have a custom tabbar, it should be provided in user's markup as dire
<ion-tab></ion-tab>
<!-- User provided ion-tab-bar that can be customized -->
<ion-tab-bar color="dark" layout="icon-only">
<ion-tab-bar slot="bottom" color="dark" layout="icon-only">
</ion-tabs>
```
@@ -30,9 +30,8 @@ In order to have a custom tabbar, it should be provided in user's markup as dire
| Property | Attribute | Description | Type |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `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` |
| `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"` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `placement` | `placement` | Set the position of the tabbar, relative to the content. | `"bottom" \| "top"` |
| `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` |
| `translucent` | `translucent` | If `true`, the tab bar will be translucent. Defaults to `false`. | `boolean` |

1
core/src/components/tab-bar/tab-bar-interface.ts
View File

@@ -1,5 +1,4 @@
export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
export type TabbarPlacement = 'top' | 'bottom';
export interface TabbarChangedDetail {
tab?: string;

7
core/src/components/tab-bar/tab-bar.scss
View File

@@ -10,7 +10,6 @@
align-items: center;
justify-content: center;
order: 1;
width: auto;
@@ -37,13 +36,11 @@
--background-focused: #{current-color(shade)};
}
:host(.placement-top) {
order: -1;
:host([slot="top"]) {
border-bottom: var(--border);
}
:host(.placement-bottom) {
:host([slot="bottom"]) {
padding-bottom: var(--ion-safe-area-bottom, 0);
border-top: var(--border);

17
core/src/components/tab-bar/tab-bar.tsx
View File

@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Color, Mode, TabbarChangedDetail, TabbarLayout, TabbarPlacement } from '../../interface';
import { Color, Mode, TabbarChangedDetail, TabbarLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
@@ -34,15 +34,10 @@ export class TabBar 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.
*/
@Prop() layout: TabbarLayout = 'icon-top';
/**
* Set the position of the tabbar, relative to the content.
*/
@Prop() placement: TabbarPlacement = 'bottom';
/**
* The selected tab component
*/
@@ -69,7 +64,7 @@ export class TabBar implements ComponentInterface {
@Listen('body:keyboardWillShow')
protected onKeyboardWillShow() {
if (this.placement === 'bottom') {
if (this.el.getAttribute('slot') === 'bottom') {
this.keyboardVisible = true;
}
}
@@ -79,15 +74,13 @@ export class TabBar implements ComponentInterface {
}
hostData() {
const { color, translucent, placement, keyboardVisible } = this;
const { color, translucent, keyboardVisible } = this;
return {
role: 'tablist',
'role': 'tablist',
'aria-hidden': keyboardVisible ? 'true' : null,
'slot': 'tabbar',
class: {
...createColorClasses(color),
'tabbar-translucent': translucent,
[`placement-${placement}`]: true,
'tabbar-hidden': keyboardVisible,
}
};

2
core/src/components/tab-button/usage/javascript.md
View File

@@ -1,7 +1,7 @@
```html
<ion-tabs>
<ion-tab-bar>
<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>

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

@@ -12,7 +12,7 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion
<ion-tab tab="home">Home Content</ion-tab>
<ion-tab tab="settings">Settings Content</ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-label>Home</ion-label>
@@ -30,6 +30,8 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion
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.
`ion-tab-bar` always needs `slot="bottom"` in order to be projected into `ion-tabs` at the right place.
## The "tab" property
Each `ion-tab-button` will activate one of the tabs when tapped.
@@ -68,7 +70,7 @@ Using tabs with Angular's router is fairly straight forward. The only additional
```html
<ion-tabs>
<ion-tab-bar>
<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>

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

@@ -196,10 +196,11 @@ export class Tabs implements NavOutlet {
render() {
return [
<slot name="top"></slot>,
<div class="tabs-inner">
<slot></slot>
</div>,
<slot name="tabbar"></slot>
<slot name="bottom"></slot>
];
}
}

2
core/src/components/tabs/test/basic/index.html
View File

@@ -69,7 +69,7 @@
<ion-tab tab="tab-four" component="page-one"></ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button href="" tab="tab-one" class="e2eTabOneButton">
<ion-label>Tab One</ion-label>
<ion-icon name="star"></ion-icon>

2
core/src/components/tabs/test/placements/index.html
View File

@@ -55,7 +55,7 @@
<ion-tab tab="page-one" disabled icon="chatboxes" component="page-one"></ion-tab>
<ion-tab-bar placement="top">
<ion-tab-bar slot="top">
<ion-tab-button tab="star-tab">
<ion-icon name="star"></ion-icon>
</ion-tab-button>

2
core/src/components/tabs/test/preview/index.html
View File

@@ -54,7 +54,7 @@
<ion-tab tab="tab-four" component="page-one"></ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-one">
<ion-label>Plain List</ion-label>
<ion-icon name="star"></ion-icon>

2
core/src/components/tabs/test/vanilla/index.html
View File

@@ -23,7 +23,7 @@
<div class="div-two" slot="not-initialized">Div Two</div>
</ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-one">
<ion-label>Tab One</ion-label>
<ion-icon name="star"></ion-icon>

2
core/src/components/tabs/usage/angular.md
View File

@@ -1,7 +1,7 @@
```html
<ion-tabs>
<ion-tab-bar>
<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>

2
core/src/components/tabs/usage/javascript.md
View File

@@ -9,7 +9,7 @@
<ion-tab tab="tab-map" component="page-map"></ion-tab>
<ion-tab tab="tab-about" component="page-about"></ion-tab>
<ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>