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

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

@ -71,17 +71,17 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
## CSS Custom Properties
| Name | Description |
| ----------------------- | ------------------------------------- |
| `--background` | Background of the tab button |
| `--background-selected` | Background of the selected tab button |
| `--color` | Color of the tab button |
| `--color-selected` | Color of the selected tab button |
| `--padding-bottom` | Bottom padding of the tab button |
| `--padding-end` | End padding of the tab button |
| `--padding-start` | Start padding of the tab button |
| `--padding-top` | Top padding of the tab button |
| `--ripple-color` | Color of the button ripple effect |
| Name | Description |
| ---------------------- | ------------------------------------ |
| `--background` | Background of the tab button |
| `--background-focused` | Background of the focused tab button |
| `--color` | Color of the tab button |
| `--color-selected` | Color of the selected tab button |
| `--padding-bottom` | Bottom padding of the tab button |
| `--padding-end` | End padding of the tab button |
| `--padding-start` | Start padding of the tab button |
| `--padding-top` | Top padding of the tab button |
| `--ripple-color` | Color of the button ripple effect |
----------------------------------------------

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

@ -6,10 +6,6 @@
--padding-end: #{$tab-button-ios-padding-end};
--padding-bottom: #{$tab-button-ios-padding-bottom};
--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;

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

@ -9,10 +9,6 @@
--padding-end: #{$tab-button-md-padding-end};
--padding-bottom: #{$tab-button-md-padding-bottom};
--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;

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

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