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

fix(tab-bar): update tab-bar to set the color/background of tab-button (#16641)

Browse Source 
similar to the PR for segment: https://github.com/ionic-team/ionic/pull/16590, this implements the color/background in the tab-bar and inherits it in tab-button

closes #14853
This commit is contained in:
Brandy Carney
2018-12-10 17:33:06 -05:00
committed by GitHub
parent 9167fb4fe1
commit 2f63049909
12 changed files with 253 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -1040,7 +1040,7 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
ion-tab-button,prop,mode,"ios" | "md",undefined,false ion-tab-button,prop,mode,"ios" | "md",undefined,false
ion-tab-button,prop,tab,string,undefined,false ion-tab-button,prop,tab,string,undefined,false
ion-tab-button,css-prop,--background ion-tab-button,css-prop,--background
ion-tab-button,css-prop,--background-selected ion-tab-button,css-prop,--background-focused
ion-tab-button,css-prop,--color ion-tab-button,css-prop,--color
ion-tab-button,css-prop,--color-selected ion-tab-button,css-prop,--color-selected
ion-tab-button,css-prop,--padding-bottom ion-tab-button,css-prop,--padding-bottom

6
core/src/components/tab-bar/tab-bar.ios.scss
View File

@ -1,5 +1,6 @@
@import "./tab-bar"; @import "./tab-bar";
@import "../../themes/ionic.globals.ios"; @import "../../themes/ionic.globals.ios";
@import "../tab-button/tab-button.ios.vars";
// iOS Tabs // iOS Tabs
// -------------------------------------------------- // --------------------------------------------------
@ -7,7 +8,10 @@
:host { :host {
// default color / background // default color / background
--background: #{$tabbar-ios-background}; --background: #{$tabbar-ios-background};
--background-focused: #{$tabbar-ios-background-focused};
--border: #{$hairlines-width solid $tabbar-ios-border-color}; --border: #{$hairlines-width solid $tabbar-ios-border-color};
--color: #{$tab-button-ios-text-color};
--color-selected: #{$tabbar-ios-color-activated};
height: 50px; height: 50px;
} }
@ -15,7 +19,7 @@
// iOS Translucent Tab bar // iOS Translucent Tab bar
// -------------------------------------------------- // --------------------------------------------------
:host(.tabbar-translucent) { :host(.tab-bar-translucent) {
background-color: #{current-color(base, .8)}; background-color: #{current-color(base, .8)};
backdrop-filter: saturate(210%) blur(20px); backdrop-filter: saturate(210%) blur(20px);
} }

4
core/src/components/tab-bar/tab-bar.md.scss
View File

@ -1,10 +1,14 @@
@import "./tab-bar"; @import "./tab-bar";
@import "../../themes/ionic.globals.md"; @import "../../themes/ionic.globals.md";
@import "../tab-button/tab-button.md.vars";
:host { :host {
// default color / background // default color / background
--background: #{$tabbar-md-background}; --background: #{$tabbar-md-background};
--background-focused: #{$tabbar-md-background-focused};
--border: #{1px solid $tabbar-md-border-color}; --border: #{1px solid $tabbar-md-border-color};
--color: #{$tab-button-md-text-color};
--color-selected: #{$tabbar-md-color-activated};
height: 56px; height: 56px;
} }

11
core/src/components/tab-bar/tab-bar.scss
View File

@ -33,15 +33,18 @@
box-sizing: content-box !important; box-sizing: content-box !important;
} }
:host(.ion-color) { :host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
background: #{current-color(base)}; background: #{current-color(base)};
color: #{current-color(contrast, .7)};
} }
:host(.ion-color) ::slotted(ion-tab-button) { :host(.ion-color) ::slotted(ion-tab-button) {
--background-focused: #{current-color(shade)}; --background-focused: #{current-color(shade)};
--color-selected: #{current-color(contrast)};; }
color: #{current-color(contrast, .7)}; :host(.ion-color) ::slotted(.tab-selected) {
color: #{current-color(contrast)};;
} }
:host([slot="top"]) { :host([slot="top"]) {
@ -51,7 +54,7 @@
border-bottom: var(--border); border-bottom: var(--border);
} }
:host(.tabbar-hidden) { :host(.tab-bar-hidden) {
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */
display: none !important; display: none !important;
} }

4
core/src/components/tab-bar/tab-bar.tsx
View File

@ -74,8 +74,8 @@ export class TabBar implements ComponentInterface {
'aria-hidden': keyboardVisible ? 'true' : null, 'aria-hidden': keyboardVisible ? 'true' : null,
class: { class: {
...createColorClasses(color), ...createColorClasses(color),
'tabbar-translucent': translucent, 'tab-bar-translucent': translucent,
'tabbar-hidden': keyboardVisible, 'tab-bar-hidden': keyboardVisible,
} }
}; };
} }

10
core/src/components/tab-bar/test/custom/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('tab-bar: custom', async () => {
const page = await newE2EPage({
url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

202
core/src/components/tab-bar/test/custom/index.html Normal file
View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab Bar - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="../../../../../dist/ionic.js"></script>
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
</head>
<body>
<ion-app>
<ion-content>
<!-- Default -->
<ion-tab-bar selected-tab="1">
<ion-tab-button tab="1">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="2">
<ion-icon name="star"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="3">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
<!-- Custom Class -->
<ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
<ion-tab-button tab="11">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="22">
<ion-icon name="star"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="33">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
<!-- Color & Custom Class -->
<ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
<ion-tab-button tab="111">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="222">
<ion-icon name="star"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="333">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
<!-- Custom Background Buttons -->
<ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
<ion-tab-button tab="1111" class="custom-tab-button-background-red">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="2222" class="custom-tab-button-background-yellow">
<ion-icon name="star"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="3333" class="custom-tab-button-background-green">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
<!-- Custom Color Buttons -->
<ion-tab-bar selected-tab="1111">
<ion-tab-button tab="1111" class="custom-tab-button-color-red">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="2222" class="custom-tab-button-color-yellow">
<ion-icon name="star"></ion-icon>
<ion-label>Favorites</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="3333" class="custom-tab-button-color-green">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
<!-- Custom All -->
<ion-tab-bar selected-tab="11111" class="custom-all">
<ion-tab-button tab="11111">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="22222">
<ion-icon name="star" class="custom-icon"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="33333">
<ion-icon name="cog"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-content>
</ion-app>
<style>
.custom-tab-bar-color {
--background: #7044ff;
--color: rgb(255, 0, 234, .6);
--color-selected: #ff00ea;
}
.custom-tab-bar-color ion-badge {
background: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, .5);
}
.custom-tab-button-bar {
--background: #178fb8;
--color: rgba(255, 255, 255, .6);
--color-selected: #ffffff;
}
.custom-tab-button-background-red {
--background: #a32b2b;
}
.custom-tab-button-background-yellow {
--background: #b7b915;
}
.custom-tab-button-background-green {
--background: #5a9b2e;
}
.custom-tab-button-color-red {
--color: rgba(163, 43, 43, .6);
--color-selected: #a32b2b;
}
.custom-tab-button-color-yellow {
--color: rgba(183, 185, 21, .6);
--color-selected: #b7b915;
}
.custom-tab-button-color-green {
--color: rgb(90, 155, 46, .6);
--color-selected: #5a9b2e;
}
.custom-all {
margin-top: 30px;
margin-bottom: 30px;
contain: none;
--background: #f6f6f6;
--color-selected: #1b8472;
--border: none;
}
.custom-all ion-tab-button:nth-child(2) {
--background: #1b8472;
--color: rgba(255, 255, 255, .6);
--color-selected: #ffffff;
border-radius: 50%;
max-width: 80px;
height: 80px;
}
.custom-icon {
font-size: 50px;
}
</style>
</body>
</html>

7
core/src/components/tab-bar/test/scenarios/index.html
View File

@ -193,7 +193,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="2" class="main-tab"> <ion-tab-button tab="2" class="main-tab">
<ion-icon src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon> <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="3"> <ion-tab-button tab="3">
@ -235,7 +235,10 @@
height: 80px; height: 80px;
background: #3880ff; background: #3880ff;
color: white; color: white;
font-size: 16px; }
.main-tab-icon {
font-size: 36px;
} }
.custom-tabbar-color { .custom-tabbar-color {

4
core/src/components/tab-button/readme.md
View File

@ -72,9 +72,9 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |
| ----------------------- | ------------------------------------- | | ---------------------- | ------------------------------------ |
| `--background` | Background of the tab button | | `--background` | Background of the tab button |
| `--background-selected` | Background of the selected tab button | | `--background-focused` | Background of the focused tab button |
| `--color` | Color of the tab button | | `--color` | Color of the tab button |
| `--color-selected` | Color of the selected tab button | | `--color-selected` | Color of the selected tab button |
| `--padding-bottom` | Bottom padding of the tab button | | `--padding-bottom` | Bottom padding of the tab button |

4
core/src/components/tab-button/tab-button.ios.scss
View File

@ -6,10 +6,6 @@
--padding-end: #{$tab-button-ios-padding-end}; --padding-end: #{$tab-button-ios-padding-end};
--padding-bottom: #{$tab-button-ios-padding-bottom}; --padding-bottom: #{$tab-button-ios-padding-bottom};
--padding-start: #{$tab-button-ios-padding-start}; --padding-start: #{$tab-button-ios-padding-start};
--color: #{$tab-button-ios-text-color};
--color-selected: #{$tabbar-ios-color-activated};
--background: transparent;
--background-focused: #{$tabbar-ios-background-focused};
max-width: $tab-button-ios-max-width; max-width: $tab-button-ios-max-width;

4
core/src/components/tab-button/tab-button.md.scss
View File

@ -9,10 +9,6 @@
--padding-end: #{$tab-button-md-padding-end}; --padding-end: #{$tab-button-md-padding-end};
--padding-bottom: #{$tab-button-md-padding-bottom}; --padding-bottom: #{$tab-button-md-padding-bottom};
--padding-start: #{$tab-button-md-padding-start}; --padding-start: #{$tab-button-md-padding-start};
--color: #{$tab-button-md-text-color};
--color-selected: #{$tabbar-md-color-activated};
--background: transparent;
--background-focused: #{$tabbar-md-background-focused};
max-width: 168px; max-width: 168px;

8
core/src/components/tab-button/tab-button.scss
View File

@ -3,13 +3,16 @@
:host { :host {
/** /**
* @prop --background: Background of the tab button * @prop --background: Background of the tab button
* @prop --background-selected: Background of the selected tab button * @prop --background-focused: Background of the focused tab button
*
* @prop --color: Color of the tab button * @prop --color: Color of the tab button
* @prop --color-selected: Color of the selected tab button * @prop --color-selected: Color of the selected tab button
*
* @prop --padding-top: Top padding of the tab button * @prop --padding-top: Top padding of the tab button
* @prop --padding-end: End padding of the tab button * @prop --padding-end: End padding of the tab button
* @prop --padding-bottom: Bottom padding of the tab button * @prop --padding-bottom: Bottom padding of the tab button
* @prop --padding-start: Start padding of the tab button * @prop --padding-start: Start padding of the tab button
*
* @prop --ripple-color: Color of the button ripple effect * @prop --ripple-color: Color of the button ripple effect
*/ */
--ripple-color: var(--color-selected); --ripple-color: var(--color-selected);
@ -22,6 +25,7 @@
height: 100%; height: 100%;
background: var(--background);
color: var(--color); color: var(--color);
} }
@ -47,7 +51,7 @@ a {
outline: none; outline: none;
background: var(--background); background: transparent;
text-decoration: none; text-decoration: none;