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

Tabs sink update

Browse Source
This commit is contained in:
Max Lynch
2015-07-07 09:44:09 -05:00
parent 6ffa2343ca
commit df367e9788
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ionic/components/app/test/sink/pages/tabs.ts
View File

@@ -1,34 +1,55 @@
import {Component, Directive, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {IonicApp, Tabs, Tab, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {IonicApp, IonicView, Tabs, Tab, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({selector: 'ion-view'})
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Featured</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class FeaturedTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@Component({selector: 'ion-view'})
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Top</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class TopTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@Component({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Tabs</ion-title></ion-navbar>
<ion-tabs>
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
<ion-content class="padding">
Tab 1 Content
</ion-content>
<ion-tabs id="tabs">
<ion-tab tab-title="Featured" tab-icon="ion-ios-star" [root]="featuredTab"></ion-tab>
<ion-tab tab-title="Top Charts" tab-icon="ion-ios-list-outline" [root]="topTab"></ion-tab>
<ion-tab tab-title="Search" tab-icon="ion-ios-search">
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Search</ion-title></ion-navbar>
</ion-tab>
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
<ion-content class="padding">
Tab 2 Content
</ion-content>
<ion-tab tab-title="Updates" tab-icon="ion-ios-download-outline">
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Updates</ion-title></ion-navbar>
</ion-tab>
</ion-tabs>
`,
directives: [NavbarTemplate, Navbar, Content, Tabs, Tab]
@@ -36,5 +57,7 @@ import {SinkPage} from '../sink-page';
export class TabsPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
this.featuredTab = FeaturedTabPage;
this.topTab = TopTabPage;
}
}

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

@@ -134,9 +134,10 @@ button.tab-button {
}
button.tab-button:hover {
opacity: 0.6;
opacity: 0.8;
}
button.tab-button[aria-selected="true"] {
color: red;
// Default color is primary
color: get-color(primary, base);
}