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

md tabs

Browse Source
This commit is contained in:
Adam Bradley
2015-09-04 15:30:35 -05:00
parent c60bc5db51
commit 920701e3fd
3 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ionic/components/tabs/modes/material.scss
View File

@@ -2,9 +2,9 @@
// Material Design Tabs
// --------------------------------------------------
$tab-bar-md-item-padding: 2px 10px !default;
$tab-bar-md-item-padding: 12px 10px 4px 10px !default;
$tab-bar-md-item-font-size: 1.4rem !default;
$tab-bar-md-item-icon-size: 26px !default;
$tab-bar-md-item-icon-size: 2.4rem !default;
$tab-bar-md-item-height: 4.8rem !default;
@@ -17,6 +17,16 @@ $tab-bar-md-item-height: 4.8rem !default;
box-shadow: none;
border-radius: 0;
border-bottom: 2px solid transparent;
}
button.tab-button[aria-selected="true"] {
border-bottom-color: $tab-button-text-active;
}
.tab-button-text {
margin-top: 8px;
margin-bottom: 8px;
}
.tab-button-icon {
@@ -25,3 +35,21 @@ $tab-bar-md-item-height: 4.8rem !default;
}
}
[mode=md][tab-bar-icons=bottom] button.tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
[mode=md][tab-bar-icons=right] button.tab-button,
[mode=md][tab-bar-icons=left] button.tab-button {
padding-bottom: 10px;
icon {
min-width: 24px;
}
}
[mode=md] button.tab-button.icon-only,
[mode=md] button.tab-button.has-title-only {
padding: 8px 10px;
}

6
ionic/components/tabs/test/advanced/tabs.html
View File

@@ -1,6 +1,6 @@
<ion-tabs>
<ion-tab tab-title="Heart" tab-icon="heart" [root]="tab1Root"></ion-tab>
<ion-tab tab-title="Star" tab-icon="star" [root]="tab2Root"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="tab3Root"></ion-tab>
<ion-tab tab-title="Recents" tab-icon="call" [root]="tab1Root"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="star" [root]="tab2Root"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings" [root]="tab3Root"></ion-tab>
</ion-tabs>

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

@@ -1,48 +1,42 @@
<ion-tabs>
<ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Star" tab-icon="star"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
<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>
<ion-tabs tab-bar-icons="bottom">
<ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Star" tab-icon="star"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
<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>
<ion-tabs tab-bar-icons="right">
<ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Star" tab-icon="star"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
<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>
<ion-tabs tab-bar-icons="left">
<ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Star" tab-icon="star"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
<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>
<ion-tabs>
<ion-tab tab-icon="call"></ion-tab>
<ion-tab tab-icon="heart"></ion-tab>
<ion-tab tab-icon="star"></ion-tab>
<ion-tab tab-icon="stopwatch"></ion-tab>
<ion-tab tab-icon="settings"></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="Recents"></ion-tab>
<ion-tab tab-title="Favorites"></ion-tab>
<ion-tab tab-title="Settings"></ion-tab>
</ion-tabs>
@@ -57,5 +51,6 @@
<style>
ion-tabs {
height: auto;
margin-bottom: 24px;
}
</style>