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

tab buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-09-04 17:17:46 -05:00
parent d7192bb4f4
commit 3b5af7321c
5 changed files with 108 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,14 +4,13 @@
$tab-bar-ios-item-padding: 0px 10px !default; $tab-bar-ios-item-padding: 0px 10px !default;
$tab-bar-ios-item-font-size: 10px !default; $tab-bar-ios-item-font-size: 10px !default;
$tab-bar-ios-item-icon-size: 30px !default; $tab-bar-ios-item-icon-size: 32px !default;
$tab-bar-ios-height: 50px !default; $tab-bar-ios-height: 49px !default;
.tabs[mode=ios] { .tabs[mode=ios] {
.tab-bar { .tab-bar {
min-height: $tab-bar-ios-height;
border-top: 1px solid $toolbar-ios-border-color; border-top: 1px solid $toolbar-ios-border-color;
} }
@ -22,11 +21,13 @@ $tab-bar-ios-height: 50px !default;
.tab-button { .tab-button {
padding: $tab-bar-ios-item-padding; padding: $tab-bar-ios-item-padding;
min-height: $tab-bar-ios-height;
} }
.tab-button-text { .tab-button-text {
font-size: $tab-bar-ios-item-font-size; margin-bottom: 0;
min-height: $tab-bar-ios-item-font-size + 1; min-height: $tab-bar-ios-item-font-size + 1;
font-size: $tab-bar-ios-item-font-size;
} }
.has-title-only .tab-button-text { .has-title-only .tab-button-text {
@ -45,6 +46,36 @@ $tab-bar-ios-height: 50px !default;
} }
[mode=ios][tab-bar-icons=right] .tab-button,
[mode=ios][tab-bar-icons=left] .tab-button {
.tab-button-text {
font-size: 1.4rem;
line-height: 1.1;
margin-top: 0;
margin-bottom: 0;
}
icon {
min-width: 24px;
height: 26px;
font-size: 24px;
}
}
[mode=ios] .tab-button.has-title-only {
min-height: $tab-bar-ios-height - 8;
.tab-button-text {
font-size: 1.4rem;
line-height: 1.1;
}
}
[mode=ios] .tab-button.icon-only {
min-height: $tab-bar-ios-height - 8;
}
.hairlines .tabs[mode=ios] { .hairlines .tabs[mode=ios] {
.tab-bar { .tab-bar {

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

@ -2,31 +2,34 @@
// Material Design Tabs // Material Design Tabs
// -------------------------------------------------- // --------------------------------------------------
$tab-bar-md-item-padding: 12px 10px 4px 10px !default; $tab-bar-md-item-padding: 12px 10px 5px 10px !default;
$tab-bar-md-item-font-size: 1.4rem !default; $tab-bar-md-item-font-size: 1.4rem !default;
$tab-bar-md-item-font-weight: 500 !default;
$tab-bar-md-item-icon-size: 2.4rem !default; $tab-bar-md-item-icon-size: 2.4rem !default;
$tab-bar-md-item-height: 4.8rem !default; $tab-bar-md-item-height: 4.8rem !default;
.tabs[mode=md] { .tabs[mode=md] {
button.tab-button { .tab-button {
padding: $tab-bar-md-item-padding; padding: $tab-bar-md-item-padding;
min-height: $tab-bar-md-item-height; min-height: $tab-bar-md-item-height;
font-size: $tab-bar-md-item-font-size; font-size: $tab-bar-md-item-font-size;
font-weight: $tab-bar-md-item-font-weight;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
} }
button.tab-button[aria-selected="true"] { .tab-button[aria-selected="true"] {
border-bottom-color: $tab-button-text-active; border-bottom-color: $tab-button-text-active;
} }
.tab-button-text { .tab-button-text {
margin-top: 8px; margin-top: 5px;
margin-bottom: 8px; margin-bottom: 5px;
text-transform: uppercase;
} }
.tab-button-icon { .tab-button-icon {
@ -36,12 +39,12 @@ $tab-bar-md-item-height: 4.8rem !default;
} }
[mode=md][tab-bar-icons=bottom] button.tab-button { [mode=md][tab-bar-icons=bottom] .tab-button {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
} }
[mode=md][tab-bar-icons=right] button.tab-button, [mode=md][tab-bar-icons=right] .tab-button,
[mode=md][tab-bar-icons=left] button.tab-button { [mode=md][tab-bar-icons=left] .tab-button {
padding-bottom: 10px; padding-bottom: 10px;
icon { icon {
@ -49,7 +52,7 @@ $tab-bar-md-item-height: 4.8rem !default;
} }
} }
[mode=md] button.tab-button.icon-only, [mode=md] .tab-button.icon-only,
[mode=md] button.tab-button.has-title-only { [mode=md] .tab-button.has-title-only {
padding: 8px 10px; padding: 6px 10px 6px 10px;
} }

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

@ -57,7 +57,7 @@ ion-tab {
background: $tab-bar-background-color; background: $tab-bar-background-color;
} }
button.tab-button { .tab-button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -78,15 +78,20 @@ button.tab-button {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
&:hover,
&.hover {
color: $tab-button-text-inactive;
}
} }
[tab-bar-icons="bottom"] button.tab-button { [tab-bar-icons="bottom"] .tab-button {
.tab-button-icon { .tab-button-icon {
order: 10; order: 10;
} }
} }
[tab-bar-icons="left"] button.tab-button { [tab-bar-icons="left"] .tab-button {
flex-direction: row; flex-direction: row;
.tab-button-icon { .tab-button-icon {
@ -95,7 +100,7 @@ button.tab-button {
} }
} }
[tab-bar-icons="right"] button.tab-button { [tab-bar-icons="right"] .tab-button {
flex-direction: row; flex-direction: row;
.tab-button-icon { .tab-button-icon {
@ -133,6 +138,6 @@ button.tab-button {
white-space: normal; white-space: normal;
} }
button.tab-button[aria-selected="true"] { .tab-button[aria-selected="true"] {
color: $toolbar-active-color; color: $toolbar-active-color;
} }

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

@ -38,10 +38,10 @@ import {IonicComponent, IonicView} from '../../config/annotations';
template: '' + template: '' +
'<nav class="tab-bar-container">' + '<nav class="tab-bar-container">' +
'<div class="tab-bar" role="tablist">' + '<div class="tab-bar" role="tablist">' +
'<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' + '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
'<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' + '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
'<span class="tab-button-text">{{t.tabTitle}}</span>' + '<span class="tab-button-text">{{t.tabTitle}}</span>' +
'</button>' + '</a>' +
'</div>' + '</div>' +
'</nav>' + '</nav>' +
'<section class="content-container">' + '<section class="content-container">' +
@ -149,7 +149,7 @@ export class Tabs extends ViewController {
* TODO * TODO
*/ */
@Directive({ @Directive({
selector: 'button.tab-button', selector: '.tab-button',
properties: ['tab'], properties: ['tab'],
host: { host: {
'[attr.id]': 'btnId', '[attr.id]': 'btnId',

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

@ -1,39 +1,5 @@
<ion-tabs> <!-- Text -->
<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="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="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="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="settings"></ion-tab>
</ion-tabs>
<ion-tabs> <ion-tabs>
<ion-tab tab-title="Recents"></ion-tab> <ion-tab tab-title="Recents"></ion-tab>
<ion-tab tab-title="Favorites"></ion-tab> <ion-tab tab-title="Favorites"></ion-tab>
@ -41,6 +7,47 @@
</ion-tabs> </ion-tabs>
<!-- Icons -->
<ion-tabs>
<ion-tab tab-icon="call"></ion-tab>
<ion-tab tab-icon="heart"></ion-tab>
<ion-tab tab-icon="settings"></ion-tab>
</ion-tabs>
<!-- Icons on top of text -->
<ion-tabs>
<ion-tab tab-title="Location" tab-icon="navigate"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="star"></ion-tab>
<ion-tab tab-title="Radio" tab-icon="musical-notes"></ion-tab>
</ion-tabs>
<!-- Icons below text -->
<ion-tabs tab-bar-icons="bottom">
<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>
<!-- Icons right of text -->
<ion-tabs tab-bar-icons="right">
<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>
<!-- Icons left of text -->
<ion-tabs tab-bar-icons="left">
<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 -->
<ion-tabs> <ion-tabs>
<ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab> <ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
<ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab> <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
@ -51,6 +58,8 @@
<style> <style>
ion-tabs { ion-tabs {
height: auto; height: auto;
margin-bottom: 24px; }
ion-tabs[mode=md] {
border-bottom: 1px solid gray;
} }
</style> </style>