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

feat(ionTabs): hide tabs by default with MD

Browse Source 
Closes #229. Closes #236
Squashed commit of the following:

commit f566321e54937b8d31a8d1f85948ab5d984b9e37
Author: mhartington <mikehartington@gmail.com>
Date:   Fri Oct 2 11:03:50 2015 -0400

    feat(ionTabs): organize code and clean font sizes

commit 9ee1e28f0b01e9e195bc24a65066a57d66e5ec50
Author: mhartington <mikehartington@gmail.com>
Date:   Fri Oct 2 10:51:36 2015 -0400

    feat(ionTabs): move scss to tabs.scss

commit 3eba74c27c8eefe6e61f8f3ac12742edb7181772
Author: mhartington <mikehartington@gmail.com>
Date:   Thu Oct 1 16:23:37 2015 -0400

    feat(ionTabs): add test

commit 34f61431d41283fc8e5ed2f64e0874659072660b
Author: mhartington <mikehartington@gmail.com>
Date:   Thu Oct 1 16:13:05 2015 -0400

    feat(ionTabs): reuse tabBarIcons

commit 8c6f0edb17bcc6ff0c5f8b7be66f2be8a6775d48
Author: mhartington <mikehartington@gmail.com>
Date:   Thu Oct 1 15:56:29 2015 -0400

    feat(ionTabs): hide tab icon for md
This commit is contained in:
mhartington
2015-10-02 11:44:10 -04:00
parent f291944335
commit ae6e140fbf
5 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,6 +59,11 @@ ion-tabs[tab-bar-placement=top] tab-bar {
} }
} }
[tab-bar-icons=hide] .tab-button-text {
font-size: 1.4rem;
line-height: 1.1;
}
.tab-button.has-title-only { .tab-button.has-title-only {
min-height: $tab-bar-ios-height - 8; min-height: $tab-bar-ios-height - 8;

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

@ -64,3 +64,4 @@ tab-highlight {
transition-duration: 300ms; transition-duration: 300ms;
} }
} }

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

@ -93,31 +93,6 @@ tab-bar {
} }
} }
[tab-bar-icons=bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
[tab-bar-icons=left] .tab-button {
flex-direction: row;
.tab-button-icon {
text-align: right;
padding-right: 8px;
}
}
[tab-bar-icons=right] .tab-button {
flex-direction: row;
.tab-button-icon {
order: 10;
text-align: left;
padding-left: 8px;
}
}
.tab-button-text { .tab-button-text {
margin-top: 3px; margin-top: 3px;
margin-bottom: 2px; margin-bottom: 2px;
@ -153,3 +128,33 @@ tab-bar {
tab-highlight { tab-highlight {
display: none; display: none;
} }
[tab-bar-icons=bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
[tab-bar-icons=left] .tab-button {
flex-direction: row;
.tab-button-icon {
text-align: right;
padding-right: 8px;
}
}
[tab-bar-icons=right] .tab-button {
flex-direction: row;
.tab-button-icon {
order: 10;
text-align: left;
padding-left: 8px;
}
}
[tab-bar-icons=hide] .tab-button-icon {
display: none;
}

6
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -46,6 +46,12 @@
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab> <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No icons -->
<ion-tabs tab-bar-icons="hide">
<ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
</ion-tabs>
<!-- No overflow text --> <!-- No overflow text -->
<ion-tabs> <ion-tabs>

1
ionic/config/modes.ts
View File

@ -43,6 +43,7 @@ IonicConfig.modeConfig('md', {
modalLeave: 'modal-md-slide-out', modalLeave: 'modal-md-slide-out',
tabBarPlacement: 'top', tabBarPlacement: 'top',
tabBarIcons: 'hide',
viewTransition: 'md', viewTransition: 'md',
popupPopIn: 'popup-md-pop-in', popupPopIn: 'popup-md-pop-in',