javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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-font-size: 10px !default;
$tab-bar-ios-item-icon-size: 30px !default;
$tab-bar-ios-height: 50px !default;
$tab-bar-ios-item-icon-size: 32px !default;
$tab-bar-ios-height: 49px !default;
.tabs[mode=ios] {
.tab-bar {
min-height: $tab-bar-ios-height;
border-top: 1px solid $toolbar-ios-border-color;
}
@ -22,11 +21,13 @@ $tab-bar-ios-height: 50px !default;
.tab-button {
padding: $tab-bar-ios-item-padding;
min-height: $tab-bar-ios-height;
}
.tab-button-text {
font-size: $tab-bar-ios-item-font-size;
margin-bottom: 0;
min-height: $tab-bar-ios-item-font-size + 1;
font-size: $tab-bar-ios-item-font-size;
}
.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] {
.tab-bar {

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

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

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

@ -57,7 +57,7 @@ ion-tab {
background: $tab-bar-background-color;
}
button.tab-button {
.tab-button {
display: flex;
flex-direction: column;
justify-content: center;
@ -78,15 +78,20 @@ button.tab-button {
border: 0;
border-radius: 0;
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 {
order: 10;
}
}
[tab-bar-icons="left"] button.tab-button {
[tab-bar-icons="left"] .tab-button {
flex-direction: row;
.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;
.tab-button-icon {
@ -133,6 +138,6 @@ button.tab-button {
white-space: normal;
}
button.tab-button[aria-selected="true"] {
.tab-button[aria-selected="true"] {
color: $toolbar-active-color;
}

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

@ -26,7 +26,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
* ```
*
*/
@IonicComponent({
selector: 'ion-tabs',
defaultProperties: {
@ -38,10 +38,10 @@ import {IonicComponent, IonicView} from '../../config/annotations';
template: '' +
'<nav class="tab-bar-container">' +
'<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>' +
'<span class="tab-button-text">{{t.tabTitle}}</span>' +
'</button>' +
'</a>' +
'</div>' +
'</nav>' +
'<section class="content-container">' +
@ -149,7 +149,7 @@ export class Tabs extends ViewController {
* TODO
*/
@Directive({
selector: 'button.tab-button',
selector: '.tab-button',
properties: ['tab'],
host: {
'[attr.id]': 'btnId',

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

@ -1,39 +1,5 @@
<ion-tabs>
<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>
<!-- Text -->
<ion-tabs>
<ion-tab tab-title="Recents"></ion-tab>
<ion-tab tab-title="Favorites"></ion-tab>
@ -41,6 +7,47 @@
</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-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>
@ -51,6 +58,8 @@
<style>
ion-tabs {
height: auto;
margin-bottom: 24px;
}
ion-tabs[mode=md] {
border-bottom: 1px solid gray;
}
</style>