diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index 0531e9a8fe..d0b88d3667 100644 --- a/src/components/app/ionic.scss +++ b/src/components/app/ionic.scss @@ -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", diff --git a/src/components/button/button.scss b/src/components/button/button.scss index ad04e75d9b..6dae05e4a4 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -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 diff --git a/src/components/content/extensions/ios.scss b/src/components/content/extensions/ios.scss deleted file mode 100644 index ba9d2ca090..0000000000 --- a/src/components/content/extensions/ios.scss +++ /dev/null @@ -1,10 +0,0 @@ - -// iOS Content -// -------------------------------------------------- - -$content-ios-background-color: #efeff4 !default; - - -.view-ios .pane-container { - background-color: $content-ios-background-color; -} diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index ee1c005f8f..1601d192fa 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -10,12 +10,13 @@ import {IonicComponent} from 'ionic2/config/component' @Template({ inline: `
-
+
- {{tab.title}} + (^click)="onClickTabItem($event, tab)"> + + {{tab.title}}
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 9169ab1fc8..183f2ee51e 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -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 { diff --git a/src/components/tabs/test/advanced/pages/tabs.html b/src/components/tabs/test/advanced/pages/tabs.html index 3acd3f0b84..acc1eef577 100644 --- a/src/components/tabs/test/advanced/pages/tabs.html +++ b/src/components/tabs/test/advanced/pages/tabs.html @@ -1,4 +1,4 @@ - + diff --git a/src/components/tabs/test/advanced/pages/tabs.js b/src/components/tabs/test/advanced/pages/tabs.js index dc657b9b7b..7b77a0c6b5 100644 --- a/src/components/tabs/test/advanced/pages/tabs.js +++ b/src/components/tabs/test/advanced/pages/tabs.js @@ -22,7 +22,7 @@ export class TabsPage { // @Component({ selector: 't1p1' }) @Template({ - inline: 'Tab 1 Page 1.

', + inline: 'Tab 1 Page 1.

', directives: [View] }) class Tab1Page1 { @@ -36,7 +36,7 @@ class Tab1Page1 { @Component({ selector: 't1p2' }) @Template({ - inline: 'Tab 1
Page 2.

', + inline: 'Tab 1
Page 2.

', directives: [View] }) class Tab1Page2 { @@ -50,7 +50,7 @@ class Tab1Page2 { // @Component({ selector: 't2p1' }) @Template({ - inline: '

Tab 2 Page 1. ', + inline: '

Tab 2 Page 1. ', directives: [View] }) class Tab2Page1 { @@ -64,7 +64,7 @@ class Tab2Page1 { @Component({ selector: 't2p2' }) @Template({ - inline: '

Tab 2
Page 2. ', + inline: '

Tab 2
Page 2. ', directives: [View] }) class Tab2Page2 { diff --git a/src/components/tabs/test/tab-bar-icons/e2e.js b/src/components/tabs/test/tab-bar-icons/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/tabs/test/tab-bar-icons/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/tabs/test/tab-bar-icons/main.html b/src/components/tabs/test/tab-bar-icons/main.html new file mode 100644 index 0000000000..958b07a8b1 --- /dev/null +++ b/src/components/tabs/test/tab-bar-icons/main.html @@ -0,0 +1,112 @@ + +
+ +
Icon Top of Text (Default)
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
Icon Bottom of Text
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
Icon Left of Text
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
Icon Right of Text
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
Icon Only
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
Text Only
+
+
+ + + Home + + + + Favorites Ellipsis Ellipsis + + + + Settings Ellipsis Ellipsis + +
+
+ +
diff --git a/src/components/tabs/test/tab-bar-icons/main.js b/src/components/tabs/test/tab-bar-icons/main.js new file mode 100644 index 0000000000..2e4fa1ddf5 --- /dev/null +++ b/src/components/tabs/test/tab-bar-icons/main.js @@ -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)