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

tab bar updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-21 14:31:13 -05:00
parent f1303424b1
commit 03246b6722
11 changed files with 93 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/form/text-input.ts
View File

@ -95,7 +95,7 @@ export class TextInput extends IonInput {
if (scrollView && this.scrollAssist) {
// this input is inside of a scroll view
// scroll the input to the top
let inputY = this.elementRef.nativeElement.offsetTop - 15;
let inputY = this.elementRef.nativeElement.offsetTop - SCROLL_Y_PADDING;
// do not allow any clicks while it's scrolling
ClickBlock(true, SCROLL_INTO_VIEW_DURATION + 200);
@ -158,3 +158,4 @@ export class TextInput extends IonInput {
}
const SCROLL_INTO_VIEW_DURATION = 500;
const SCROLL_Y_PADDING = 28;

26
ionic/components/tabs/extensions/material.scss
View File

@ -2,27 +2,23 @@
// Material Design Tabs
// --------------------------------------------------
$tab-bar-material-item-padding: 4px 10px !default;
$tab-bar-material-active-border-width: 3px !default;
$tab-bar-material-active-border-color: red !default;
$tab-bar-material-text-transform: uppercase !default;
$tab-bar-material-text-font-weight: 500 !default;
$tab-bar-md-item-padding: 0 10px !default;
$tab-bar-md-item-font-size: 1.4rem !default;
.tabs[mode="md"] {
.tab-bar-item {
padding: $tab-bar-material-item-padding;
text-transform: $tab-bar-material-text-transform;
font-weight: $tab-bar-material-text-font-weight;
button.tab-button {
padding: $tab-bar-md-item-padding;
font-size: $tab-bar-md-item-font-size;
box-shadow: none;
border-radius: 0;
white-space: normal;
}
.tab-bar .tab-bar-item {
border-bottom: $tab-bar-material-active-border-width solid transparent;
}
.tab-bar .tab-active {
border-bottom-color: $tab-bar-material-active-border-color;
.tab-button-text {
white-space: normal;
}
}

8
ionic/components/tabs/tabs.scss
View File

@ -116,11 +116,13 @@ button.tab-button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: none;
}
.tab-bar-icon-only .tab-button-text,
.tab-bar-text-only .tab-button-icon {
display: none;
.has-icon .tab-button-icon,
.has-title .tab-button-text {
display: block;
}
button.tab-button[aria-selected="true"] {

11
ionic/components/tabs/tabs.ts
View File

@ -119,6 +119,10 @@ export class Tabs extends ViewController {
'[attr.id]': 'btnId',
'[attr.aria-controls]': 'panelId',
'[attr.aria-selected]': 'tab.isSelected',
'[class.has-title]': 'hasTitle',
'[class.has-icon]': 'hasIcon',
'[class.has-title-only]': 'hasTitleOnly',
'[class.has-icon-only]': 'hasIconOnly',
'(^click)': 'onClick($event)'
}
})
@ -128,9 +132,14 @@ class TabButton {
}
onInit() {
let id = this.tab.item.id
let id = this.tab.item.id;
this.btnId = 'tab-button-' + id;
this.panelId = 'tab-panel-' + id;
this.hasTitle = !!this.tab.tabTitle;
this.hasIcon = !!this.tab.tabIcon;
this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
this.hasIconOnly = (this.hasIcon && !this.hasTitle);
}
onClick(ev) {

2
ionic/components/tabs/test/tab-bar-bottom/main.html
View File

@ -1,5 +1,5 @@
<ion-tabs placement="bottom">
<ion-tabs tab-bar-placement="bottom">
<ion-tab tab-title="Tab 1">
<ion-view nav-title="Tab 1">

112
ionic/components/tabs/test/tab-bar-icons/main.html
View File

@ -1,112 +0,0 @@
<div style="margin: 4px 0">
<h6>Icon Top of Text (Default)</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Bottom of Text</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar tab-bar-icon-bottom">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Left of Text</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar tab-bar-icon-left">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Right of Text</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar tab-bar-icon-right">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Only</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar tab-bar-icon-only">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Text Only</h6>
<div class="tab-bar-container toolbar-ios">
<div class="tab-bar tab-bar-text-only">
<a class="tab-bar-item tab-active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
</div>

0
ionic/components/tabs/test/tab-bar-icons/e2e.ts → ionic/components/tabs/test/tab-bar-scenarios/e2e.ts
View File

0
ionic/components/tabs/test/tab-bar-icons/index.ts → ionic/components/tabs/test/tab-bar-scenarios/index.ts
View File

61
ionic/components/tabs/test/tab-bar-scenarios/main.html Normal file
View File

@ -0,0 +1,61 @@
<ion-tabs>
<ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
<ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
<ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
</ion-tabs>
<ion-tabs tab-bar-icons="bottom">
<ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
<ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
<ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
</ion-tabs>
<ion-tabs tab-bar-icons="right">
<ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
<ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
<ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
</ion-tabs>
<ion-tabs tab-bar-icons="left">
<ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
<ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
<ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
</ion-tabs>
<ion-tabs>
<ion-tab tab-icon="ion-ios-heart-outline"></ion-tab>
<ion-tab tab-icon="ion-ios-star-outline"></ion-tab>
<ion-tab tab-icon="ion-ios-stopwatch-outline"></ion-tab>
<ion-tab tab-icon="ion-ios-gear-outline"></ion-tab>
</ion-tabs>
<ion-tabs>
<ion-tab tab-title="Heart"></ion-tab>
<ion-tab tab-title="Star"></ion-tab>
<ion-tab tab-title="Stopwatch"></ion-tab>
<ion-tab tab-title="Gear"></ion-tab>
</ion-tabs>
<ion-tabs>
<ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
<ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
<ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
</ion-tabs>
<style>
ion-tabs {
height: auto;
}
</style>

1
ionic/components/toolbar/toolbar.scss
View File

@ -27,6 +27,7 @@ $toolbar-title-text-color: #000 !default;
align-items: center;
justify-content: space-between;
order: $flex-order-toolbar-top;
flex: 0;
background-color: $toolbar-background;

3
ionic/platform/registry.ts
View File

@ -57,7 +57,8 @@ Platform.register({
type: 'overlay',
keyboardScrollAssist: true,
viewTransition: 'md',
mdRipple: true
mdRipple: true,
tabBarPlacement: 'top'
},
isMatch(p) {
// "silk" is kindle fire