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

tab bar icons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-22 16:04:42 -05:00
parent 9c7e454e90
commit f34d314ae2
7 changed files with 23 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/tabs/extensions/ios.scss
View File

@ -2,8 +2,6 @@
// iOS Toolbar
// --------------------------------------------------
$tab-bar-ios-min-height: 52px !default;
$tab-bar-ios-item-padding: 3px 10px !default;
$tab-bar-ios-item-font-size: 1.1rem !default;
$tab-bar-ios-item-icon-size: 2.8rem !default;
@ -11,10 +9,6 @@ $tab-bar-ios-item-icon-size: 2.8rem !default;
.tabs-ios {
.tab-bar-container {
min-height: $tab-bar-ios-min-height;
}
.tab-bar-item {
padding: $tab-bar-ios-item-padding;
}

5
src/components/tabs/extensions/material.scss
View File

@ -2,7 +2,6 @@
// Material Design Toolbar
// --------------------------------------------------
$tab-bar-material-min-height: 10px !default;
$tab-bar-material-item-padding: 4px 10px !default;
$tab-bar-material-active-border-width: 3px !default;
$tab-bar-material-active-border-color: red !default;
@ -12,10 +11,6 @@ $tab-bar-material-text-font-weight: 500 !default;
.tabs-md {
.tab-bar-container {
min-height: $tab-bar-material-min-height;
}
.tab-bar-item {
padding: $tab-bar-material-item-padding;
text-transform: $tab-bar-material-text-transform;

1
src/components/tabs/tab.js
View File

@ -17,6 +17,7 @@ import {IonicComponent} from 'ionic2/config/component'
selector: 'ion-tab',
bind: {
title: 'tab-title',
icon: 'tab-icon',
initial: 'initial'
}
})

35
src/components/tabs/tabs.js
View File

@ -5,8 +5,7 @@ import {IonicComponent} from 'ionic2/config/component'
selector: 'ion-tabs',
bind: {
tabBarPlacement: 'tab-bar-placement',
tabBarIcons: 'tab-bar-icons',
tabBarText: 'tab-bar-text'
tabBarIcons: 'tab-bar-icons'
}
})
@Template({
@ -16,22 +15,18 @@ import {IonicComponent} from 'ionic2/config/component'
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
</header>
<nav class="tab-bar-container"
role="tablist"
<nav class="tab-bar-container" role="tablist"
[attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
<div class="tab-bar">
<button *for="#tab of tabs"
<button *for="#t of tabs"
role="tab"
class="tab-bar-item"
[attr.id]="'tab-item-' + tab.tabId"
[attr.aria-controls]="'tab-content-' + tab.tabId"
[attr.aria-selected]="tab.isSelected"
(^click)="onClickTabItem($event, tab)">
<icon class="tab-bar-item-icon ion-home"
[hidden]="tabBarIcons=='none'"
[class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
[class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
[attr.id]="'tab-item-' + t.tabId"
[attr.aria-controls]="'tab-content-' + t.tabId"
[attr.aria-selected]="t.isSelected"
(^click)="onClickTabItem($event, t)">
<icon class="tab-bar-item-icon ion-home" [hidden]="!t.icon"></icon>
<span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
</button>
</div>
</nav>
@ -50,6 +45,9 @@ export class Tabs {
this.config = Tabs.config.invoke(this)
this.tabs = []
setTimeout(() => {
console.log(this)
},500)
}
addTab(tab) {
@ -80,20 +78,19 @@ export class Tabs {
new IonicComponent(Tabs, {
bind: {
'tab-bar-placement': {
tabBarPlacement: {
defaults: {
ios: 'bottom',
android: 'top',
core: 'bottom'
}
},
'tab-bar-icons': {
tabBarIcons: {
defaults: {
ios: 'top',
android: 'none',
android: 'top',
core: 'top'
}
},
tabBarText: {}
}
}
})

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

@ -2,7 +2,6 @@
// Tabs
// --------------------------------------------------
$tab-bar-min-height: 10px !default;
$tab-bar-background-color: #f7f7f8 !default;
$tab-bar-item-padding: 10px !default;
@ -27,7 +26,6 @@ $tab-bar-item-max-width: 160px !default;
.tab-bar-container {
@include flex-justify-content(center);
position: relative;
min-height: $tab-bar-min-height;
background: $tab-bar-background-color;
}
@ -59,13 +57,13 @@ $tab-bar-item-max-width: 160px !default;
background: none;
}
.tab-bar-icon-bottom .tab-bar-item {
[tab-bar-icons="bottom"] > .tab-bar-container .tab-bar-item {
.tab-bar-item-icon {
@include flex-order(10);
}
}
.tab-bar-icon-left .tab-bar-item {
[tab-bar-icons="left"] > .tab-bar-container .tab-bar-item {
@include flex-direction(row);
.tab-bar-item-icon {
@ -74,7 +72,7 @@ $tab-bar-item-max-width: 160px !default;
}
}
.tab-bar-icon-right .tab-bar-item {
[tab-bar-icons="right"] > .tab-bar-container .tab-bar-item {
@include flex-direction(row);
.tab-bar-item-icon {

4
src/components/tabs/test/basic/main.html
View File

@ -1,7 +1,7 @@
<ion-tabs>
<ion-tab tab-title="Tab 1">
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
<ion-view nav-title="Tab 1">
<ion-content class="padding">
Tab 1 Content
@ -9,7 +9,7 @@
</ion-view>
</ion-tab>
<ion-tab tab-title="Tab 2">
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
<ion-view nav-title="Tab 2">
<ion-content class="padding">
Tab 2 Content

2
src/config/component.js
View File

@ -66,7 +66,7 @@ export class IonicComponent {
let defaultValue = binding._defaultValue
if (!instance[binding.property] && defaultValue) {
instance[binding.property] = defaultValue
instance.domElement.setAttribute(attrName, defaultValue)
instance.domElement.setAttribute(util.pascalCaseToDashCase(attrName), defaultValue)
}
}