javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): update UI to match material design spec

Browse Source
This commit is contained in:
Brandy Carney
2016-11-18 13:48:24 -05:00
parent 7bbfb7e536
commit e7275f23c6
2 changed files with 86 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/tabs/tabs.md.scss
View File

@ -4,70 +4,85 @@
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Background color of the tabbar /// @prop - Background color of the tabbar
$tabs-md-background: $toolbar-md-background !default; $tabs-md-background: $toolbar-md-background !default;
/// @prop - Padding on the tab button /// @prop - Padding on the tab button
$tabs-md-tab-padding: 8px 0 10px 0 !default; $tabs-md-tab-padding: 0 !default;
/// @prop - Min height of the tab button /// @prop - Min height of the tab button
$tabs-md-tab-min-height: 5.6rem !default; $tabs-md-tab-min-height: 5.6rem !default;
/// @prop - Font size of the inactive tab button text /// @prop - Font size of the inactive tab button text
$tabs-md-tab-font-size: 1.2rem !default; $tabs-md-tab-font-size: 1.2rem !default;
/// @prop - Font weight of the tab button text /// @prop - Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default; $tabs-md-tab-font-weight: normal !default;
/// @prop - Opacity of the inactive tab button /// @prop - Opacity of the inactive tab button
$tabs-md-tab-opacity: .7 !default; $tabs-md-tab-opacity: .7 !default;
/// @prop - Text color of the inactive tab button /// @prop - Text color of the inactive tab button
$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default; $tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;
/// @prop - Padding of the active tab button /// @prop - Padding of the active tab button
$tabs-md-tab-padding-active: 6px 0 10px 0 !default; $tabs-md-tab-padding-active: 0 !default;
/// @prop - Font size of the active tab button text /// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.4rem !default; $tabs-md-tab-font-size-active: 1.4rem !default;
/// @prop - Text color of the active tab button /// @prop - Text color of the active tab button
$tabs-md-tab-color-active: $toolbar-md-active-color !default; $tabs-md-tab-color-active: $toolbar-md-active-color !default;
/// @prop - Margin on the tab button text /// @prop - Margin on the tab button text
$tabs-md-tab-text-margin: 6px 0 !default; $tabs-md-tab-text-margin: 0 !default;
/// @prop - Capitalization of the tab button text /// @prop - Capitalization of the tab button text
$tabs-md-tab-text-capitalization: none !default; $tabs-md-tab-text-capitalization: none !default;
/// @prop - Transform for the tab button text
$tabs-md-tab-text-transform: scale($tabs-md-tab-font-size / $tabs-md-tab-font-size-active) !default;
/// @prop - Transform origin for the tab button text /// @prop - Transform origin for the tab button text
$tabs-md-tab-text-transform-origin: bottom center !default; $tabs-md-tab-text-transform-origin: 50% 80% !default;
/// @prop - Margin on the active tab button text
$tabs-md-tab-text-margin-active: 7px 0 !default;
/// @prop - Transform for the active tab button text /// @prop - Transform for the active tab button text
$tabs-md-tab-text-transform-active: scale(1) !default; $tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default;
/// @prop - Text transition for the tab button text /// @prop - Text transition for the tab button text
$tabs-md-tab-text-transition: transform 200ms ease-in-out !default; $tabs-md-tab-text-transition: transform .3s ease-in-out !default;
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tabs-md-tab-icon-transform-active: translate3d(0, -2px, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-right
$tabs-md-tab-icon-right-transform-active: translate3d(2px, 0, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
$tabs-md-tab-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-left
$tabs-md-tab-icon-left-transform-active: translate3d(-2px, 0, 0) !default;
/// @prop - Transform origin for the tab button text
$tabs-md-tab-icon-transform-origin: 50% 150% !default;
/// @prop - Text transition for the tab button icon
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;
/// @prop - Size of the tab button icon /// @prop - Size of the tab button icon
$tabs-md-tab-icon-size: 2.4rem !default; $tabs-md-tab-icon-size: 2.4rem !default;
.tabs-md .tabbar { .tabs-md .tabbar {
background: $tabs-md-background; background: $tabs-md-background;
} }
// Material Design Tab Button
// --------------------------------------------------
.tabs-md .tab-button { .tabs-md .tab-button {
padding: $tabs-md-tab-padding; padding: $tabs-md-tab-padding;
min-height: $tabs-md-tab-min-height; min-height: $tabs-md-tab-min-height;
font-size: $tabs-md-tab-font-size-active;
font-weight: $tabs-md-tab-font-weight; font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-color; color: $tabs-md-tab-color;
} }
@ -78,56 +93,78 @@ $tabs-md-tab-icon-size: 2.4rem !default;
color: $tabs-md-tab-color-active; color: $tabs-md-tab-color-active;
} }
// Material Design Tab Button Text
// --------------------------------------------------
.tabs-md .tab-button-text { .tabs-md .tab-button-text {
margin: $tabs-md-tab-text-margin; margin: $tabs-md-tab-text-margin;
text-transform: $tabs-md-tab-text-capitalization; font-size: $tabs-md-tab-font-size;
transform: $tabs-md-tab-text-transform;
transform-origin: $tabs-md-tab-text-transform-origin;
text-transform: $tabs-md-tab-text-capitalization;
transform-origin: $tabs-md-tab-text-transform-origin;
transition: $tabs-md-tab-text-transition; transition: $tabs-md-tab-text-transition;
} }
.tabs-md .tab-button[aria-selected=true] .tab-button-text { .tabs-md .tab-button[aria-selected=true] .tab-button-text {
margin: $tabs-md-tab-text-margin-active;
transform: $tabs-md-tab-text-transform-active; transform: $tabs-md-tab-text-transform-active;
} transition: $tabs-md-tab-text-transition;
.tabs-md .tab-button-icon {
min-width: $tabs-md-tab-icon-size + 5;
font-size: $tabs-md-tab-icon-size;
} }
.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text { .tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
margin-top: 4px;
margin-bottom: 0; margin-bottom: 0;
} }
.tabs-md[tabsLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text { .tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
margin-top: 0; margin-top: 0;
} }
.tabs-md[tabsLayout=icon-right] .tab-button,
.tabs-md[tabsLayout=icon-left] .tab-button { // Material Design Tab Button Icon
padding-bottom: 10px; // --------------------------------------------------
.tabs-md .tab-button-icon {
margin-top: 1px;
min-width: $tabs-md-tab-icon-size;
font-size: $tabs-md-tab-icon-size;
transform-origin: $tabs-md-tab-icon-transform-origin;
transition: $tabs-md-tab-icon-transition;
} }
.tabs-md[tabsLayout=icon-right] .tab-button ion-icon, // Tab layout: icon-top, icon-only, title-only
.tabs-md[tabsLayout=icon-left] .tab-button ion-icon { .tabs-md .tab-button[aria-selected=true] .tab-button-icon {
min-width: 24px; transform: $tabs-md-tab-icon-transform-active;
} }
// Tab layout: icon-right
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-right-transform-active;
}
// Tab layout: icon-bottom
.tabs-md[tabsLayout=icon-bottom] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-bottom-transform-active;
}
// Tab layout: icon-left
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-left-transform-active;
}
// Material Design Tab with Icon or Title only
// --------------------------------------------------
.tabs-md[tabsLayout=icon-hide] .tab-button, .tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button, .tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only, .tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only { .tabs-md .tab-button.has-title-only {
padding: 6px 10px; padding: 0 10px;
} }

6
src/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -18,9 +18,9 @@
<!-- Icons on top of text --> <!-- Icons on top of text -->
<ion-tabs no-navbar selectedIndex="2"> <ion-tabs no-navbar selectedIndex="2">
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab> <ion-tab tabTitle="Location" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab> <ion-tab tabTitle="Radio" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>