-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(tab-bar): add translucent tab-bar styles back (#17376)
- updates css to allow for translucent tab-bar - adds translucent test
- Loading branch information
1 parent
b49257a
commit 374bd77
Showing
6 changed files
with
292 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @import "../../themes/ionic.globals.ios"; | ||
| @import "../tab-button/tab-button.ios.vars"; | ||
|
|
||
| // iOS Tab Bar | ||
| // -------------------------------------------------- | ||
|
|
||
| /// @prop - Alpha of translucent tab bar background color | ||
| $tab-bar-ios-translucent-background-color-alpha: .8 !default; | ||
|
|
||
| /// @prop - Translucent tab bar background color | ||
| $tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default; | ||
|
|
||
| /// @prop - Filter of the translucent tab bar background color | ||
| $tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,3 +12,7 @@ | |
|
|
||
| height: 56px; | ||
| } | ||
|
|
||
| :host(.tab-bar-translucent) ::slotted(ion-tab-button) { | ||
| background: transparent; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| test('tab-bar: translucent', async () => { | ||
| const page = await newE2EPage({ | ||
| url: '/src/components/tab-bar/test/translucent?ionic:_testing=true' | ||
| }); | ||
|
|
||
| const compare = await page.compareScreenshot(); | ||
| expect(compare).toMatchScreenshot(); | ||
| }); |
213 changes: 213 additions & 0 deletions
213
core/src/components/tab-bar/test/translucent/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| <!DOCTYPE html> | ||
| <html dir="ltr"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Tab Bar - Spec</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="../../../../../scripts/testing/scripts.js"></script> | ||
| <script src="../../../../../dist/ionic.js"></script> | ||
| <link rel="stylesheet" href="../../../../../css/ionic.bundle.css"> | ||
| <link rel="stylesheet" href="../../../../../scripts/testing/styles.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Default --> | ||
| <ion-tab-bar translucent selected-tab="1"> | ||
|
|
||
| <ion-tab-button tab="1"> | ||
| <ion-label>Recents</ion-label> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-label>Favorites</ion-label> | ||
| <ion-badge>6</ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-label>Settings</ion-label> | ||
| </ion-tab-button> | ||
|
|
||
| </ion-tab-bar> | ||
|
|
||
| <!-- Badges --> | ||
| <ion-tab-bar translucent selected-tab="1"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| <ion-label>Item One Max</ion-label> | ||
| <ion-badge color="danger"></ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| <ion-badge color="danger">88</ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| <ion-badge color="danger">888+</ion-badge> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <ion-tab-bar translucent selected-tab="1"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2" layout="icon-bottom"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| <ion-label>Item One Max</ion-label> | ||
| <ion-badge color="danger"></ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| <ion-badge color="danger">88</ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| <ion-badge color="danger">888+</ion-badge> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <ion-tab-bar translucent selected-tab="1"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <ion-tab-bar translucent selected-tab="1"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2" layout="icon-bottom"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| <ion-label>Item One Max</ion-label> | ||
| <ion-badge color="danger">88</ion-badge> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <!-- Custom Height --> | ||
| <ion-tab-bar translucent color="danger" selected-tab="3" class="custom-height"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <!-- Custom Height / Alignment --> | ||
| <ion-tab-bar translucent color="tertiary" selected-tab="3" class="custom-height custom-top"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <!-- Translucent --> | ||
| <ion-tab-bar translucent> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <!-- Translucent / Custom Color --> | ||
| <ion-tab-bar translucent class="custom-background"> | ||
| <ion-tab-button tab="1"> | ||
| <ion-icon name="heart"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="2"> | ||
| <ion-icon name="musical-note"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="3"> | ||
| <ion-icon name="today"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button tab="4"> | ||
| <ion-icon name="calendar"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
|
|
||
| <style> | ||
| body { | ||
| background: linear-gradient( | ||
| to right, orange , yellow, green, cyan, blue, violet | ||
| ); | ||
| } | ||
|
|
||
| ion-tab-bar { | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .custom-height { | ||
| height: 80px; | ||
| } | ||
|
|
||
| .custom-top ion-tab-button { | ||
| justify-content: start; | ||
| } | ||
|
|
||
| .custom-background { | ||
| --background: rgba(124, 243, 217, 0.6); | ||
| } | ||
| </style> | ||
| </body> | ||
|
|
||
| </html> |