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

tab icons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-06 14:52:27 -05:00
parent 89fa2d0002
commit 9a9ded1d81
10 changed files with 200 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/app/ionic.scss
View File

@ -50,7 +50,6 @@
"../button/extensions/ios",
"../card/extensions/ios",
"../checkbox/extensions/ios",
"../content/extensions/ios",
"../list/extensions/ios",
"../item/extensions/ios",
"../radio/extensions/ios",

1
src/components/button/button.scss
View File

@ -51,6 +51,7 @@ $button-small-icon-size: 2.1rem !default;
outline: none;
cursor: pointer;
@include user-select(none);
&:after {
// used to create a larger button "hit" area

10
src/components/content/extensions/ios.scss
View File

@ -1,10 +0,0 @@
// iOS Content
// --------------------------------------------------
$content-ios-background-color: #efeff4 !default;
.view-ios .pane-container {
background-color: $content-ios-background-color;
}

9
src/components/tabs/tabs.js
View File

@ -10,12 +10,13 @@ import {IonicComponent} from 'ionic2/config/component'
@Template({
inline: `
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-content">
<div class="tab-bar-container">
<a *for="#tab of tabs"
class="tab-bar-item tab-active"
class="tab-bar-item tab-active"
[class.active]="tab.isSelected"
(click)="onClickTabItem($event, tab)">
{{tab.title}}
(^click)="onClickTabItem($event, tab)">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">{{tab.title}}</span>
</a>
</div>
</div>

66
src/components/tabs/tabs.scss
View File

@ -2,23 +2,79 @@
// Tabs
// --------------------------------------------------
$tab-bar-item-padding: 10px !default;
$tab-bar-item-min-width: 100px !default;
.tabs {
}
.toolbar.tab-bar {
@include flex-justify-content(center);
}
.tab-bar-content {
.tab-bar-container {
@include flex-display();
height: 100%;
overflow: hidden;
}
.tab-bar-item {
@include flex-display();
@include flex-justify-content(center);
@include flex-direction(column);
@include flex(1);
min-width: 100px;
@include flex-align-self(center);
padding: $tab-bar-item-padding;
min-width: $tab-bar-item-min-width;
text-align: center;
cursor: pointer;
@include user-select(none);
}
.tab-bar-icon-bottom .tab-bar-item {
.tab-bar-item-icon {
@include flex-order(10);
}
}
.tab-bar-icon-left .tab-bar-item {
@include flex-direction(row);
.tab-bar-item-icon {
text-align: right;
padding-right: 5px;
}
}
.tab-bar-icon-right .tab-bar-item {
@include flex-direction(row);
.tab-bar-item-icon {
@include flex-order(10);
text-align: left;
padding-left: 5px;
}
}
.tab-bar-item-text,
.tab-bar-item-icon {
@include flex-align-self(center);
min-width: 26px;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tab-bar-icon-only .tab-bar-item-text,
.tab-bar-text-only .tab-bar-item-icon {
display: none;
}
.tab-bar-item:hover {
opacity: 0.6;
}
.tab-bar-item.active {

2
src/components/tabs/test/advanced/pages/tabs.html
View File

@ -1,4 +1,4 @@
<ion-view view-title="Tabs">
<ion-view>
<ion-tabs>
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
</ion-tab>

8
src/components/tabs/test/advanced/pages/tabs.js
View File

@ -22,7 +22,7 @@ export class TabsPage {
//
@Component({ selector: 't1p1' })
@Template({
inline: '<ion-view>Tab 1 Page 1.<br/><br/><button (click)="next()">Next</button></ion-view>',
inline: '<ion-view nav-title="Tab 1 Page 1">Tab 1 Page 1.<br/><br/><button (click)="next()">Next</button></ion-view>',
directives: [View]
})
class Tab1Page1 {
@ -36,7 +36,7 @@ class Tab1Page1 {
@Component({ selector: 't1p2' })
@Template({
inline: '<ion-view>Tab 1<br/>Page 2.<br/></br><button (click)="pop()">Pop</button></ion-view>',
inline: '<ion-view nav-title="Tab 1 Page 2">Tab 1<br/>Page 2.<br/></br><button (click)="pop()">Pop</button></ion-view>',
directives: [View]
})
class Tab1Page2 {
@ -50,7 +50,7 @@ class Tab1Page2 {
//
@Component({ selector: 't2p1' })
@Template({
inline: '<ion-view><br/><br/>Tab 2 Page 1. <button (click)="next()">Next</button></ion-view>',
inline: '<ion-view nav-title="Tab 2 Page 1"><br/><br/>Tab 2 Page 1. <button (click)="next()">Next</button></ion-view>',
directives: [View]
})
class Tab2Page1 {
@ -64,7 +64,7 @@ class Tab2Page1 {
@Component({ selector: 't2p2' })
@Template({
inline: '<ion-view><br/><br/>Tab 2<br/>Page 2. <button (click)="pop()">Pop</button></ion-view>',
inline: '<ion-view nav-title="Tab 2 Page 2"><br/><br/>Tab 2<br/>Page 2. <button (click)="pop()">Pop</button></ion-view>',
directives: [View]
})
class Tab2Page2 {

1
src/components/tabs/test/tab-bar-icons/e2e.js Normal file
View File

@ -0,0 +1 @@

112
src/components/tabs/test/tab-bar-icons/main.html Normal file
View File

@ -0,0 +1,112 @@
<div style="margin: 4px 0">
<h6>Icon Top of Text (Default)</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Bottom of Text</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container tab-bar-icon-bottom">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Left of Text</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container tab-bar-icon-left">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Right of Text</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container tab-bar-icon-right">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Icon Only</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container tab-bar-icon-only">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
<h6>Text Only</h6>
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-container tab-bar-text-only">
<a class="tab-bar-item active">
<icon class="tab-bar-item-icon ion-home"></icon>
<span class="tab-bar-item-text">Home</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-star"></icon>
<span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
</a>
<a class="tab-bar-item">
<icon class="tab-bar-item-icon ion-ios-gear"></icon>
<span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
</a>
</div>
</div>
</div>

15
src/components/tabs/test/tab-bar-icons/main.js Normal file
View File

@ -0,0 +1,15 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html'
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
}
}
bootstrap(IonicApp)