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

fix(tabs): hover states

Browse Source
This commit is contained in:
Adam Bradley
2015-09-24 14:48:10 -05:00
parent 4294966dad
commit fe7b070a6d
5 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/yerk/main.html
View File

@ -24,7 +24,7 @@
#tabs .tab-button {
color: #C7C7C7;
}
#tabs .tab-button[aria-selected="true"] {
#tabs .tab-button[aria-selected=true] {
color: #51E3C2;
}
</style>

2
ionic/components/tabs/modes/ios.scss
View File

@ -12,7 +12,7 @@ $tab-bar-ios-height: 49px !default;
border-top: 1px solid $toolbar-ios-border-color;
}
.tabs[tab-bar-placement="top"] .tab-bar {
.tabs[tab-bar-placement=top] .tab-bar {
border-top: none;
border-bottom: 1px solid $toolbar-ios-border-color;
}

2
ionic/components/tabs/modes/md.scss
View File

@ -20,7 +20,7 @@ $tab-bar-md-item-height: 4.8rem !default;
border-bottom: 2px solid transparent;
}
.tab-button[aria-selected="true"] {
.tab-button[aria-selected=true] {
border-bottom-color: $tab-button-text-active;
}

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

@ -46,7 +46,7 @@ ion-tab {
order: $flex-order-tab-bar-bottom;
}
[tab-bar-placement="top"] .tab-bar-container {
[tab-bar-placement=top] .tab-bar-container {
order: $flex-order-tab-bar-top;
}
@ -79,18 +79,18 @@ ion-tab {
border-radius: 0;
background: none;
:hover:not(.disable-hover) {
&:hover:not(.disable-hover) {
color: $tab-button-text-inactive;
}
}
[tab-bar-icons="bottom"] .tab-button {
[tab-bar-icons=bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
[tab-bar-icons="left"] .tab-button {
[tab-bar-icons=left] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -99,7 +99,7 @@ ion-tab {
}
}
[tab-bar-icons="right"] .tab-button {
[tab-bar-icons=right] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -137,6 +137,6 @@ ion-tab {
white-space: normal;
}
.tab-button[aria-selected="true"] {
.tab-button[aria-selected=true] {
color: $toolbar-active-color;
}

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

@ -3,31 +3,34 @@ import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Host,
import {IonicApp} from '../app/app';
import {NavController} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
import {Icon} from '../icon/icon';
import {IonicComponent, IonicView} from '../../config/decorators';
import {IonicConfig} from '../../config/config';
/**
* @name ionTabs
* @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through.
*
* Assign any tabs attribute to the element to define its look and feel.
*
* For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS's design specification, but can be configured with the ionicConfig.
*
* See the ionTab component's documentation for more details on individual tabs.
*
* @usage
* ```html
* <ion-tabs>
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="root2"></ion-tab>
* <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="root3"></ion-tab>
* </ion-tabs>
* ```
*
*/
/**
* @name ionTabs
* @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages"
* that can be tabbed through.
*
* Assign any tabs attribute to the element to define its look and feel.
*
* For iOS, tabs will appear at the bottom of the screen. For Android, tabs
* will be at the top of the screen, below the nav-bar. This follows each platform's
* design specification, but can be configured with IonicConfig.
*
* See the ionTab component's documentation for more details on individual tabs.
*
* @usage
* ```html
* <ion-tabs>
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="root2"></ion-tab>
* <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="root3"></ion-tab>
* </ion-tabs>
* ```
*
*/
@IonicComponent({
selector: 'ion-tabs',
defaultProperties: {
@ -166,8 +169,12 @@ export class Tabs extends NavController {
}
})
class TabButton {
constructor(@Host() tabs: Tabs) {
constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
this.tabs = tabs;
if (config.setting('hoverCSS') === false) {
elementRef.nativeElement.classList.add('disable-hover');
}
}
onInit() {