Skip to content

Commit 374bd77

Browse files
liamdebeasibrandyscarney
liamdebeasi
authored and
brandyscarney
committed
fix(tab-bar): add translucent tab-bar styles back (#17376)
- updates css to allow for translucent tab-bar - adds translucent test
1 parent b49257a commit 374bd77

File tree

6 files changed

+292
-4
lines changed

6 files changed

+292
-4
lines changed

‎core/src/components/tab-bar/tab-bar.ios.scss

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import "./tab-bar";
2-
@import "../../themes/ionic.globals.ios";
3-
@import "../tab-button/tab-button.ios.vars";
2+
@import "./tab-bar.ios.vars";
43

54
// iOS Tabs
65
// --------------------------------------------------
@@ -20,6 +19,16 @@
2019
// --------------------------------------------------
2120

2221
:host(.tab-bar-translucent) {
23-
background-color: #{current-color(base, .8)};
24-
backdrop-filter: saturate(210%) blur(20px);
22+
--background: #{$tab-bar-ios-translucent-background-color};
23+
backdrop-filter: $tab-bar-ios-translucent-filter;
2524
}
25+
26+
// iOS Translucent Tab bar with Color
27+
:host(.ion-color.tab-bar-translucent) {
28+
background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
29+
}
30+
31+
// iOS Translucent Tab bar button
32+
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
33+
background: transparent;
34+
}

‎core/src/components/tab-bar/tab-bar.ios.vars.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "../../themes/ionic.globals.ios";
2+
@import "../tab-button/tab-button.ios.vars";
3+
4+
// iOS Tab Bar
5+
// --------------------------------------------------
6+
7+
/// @prop - Alpha of translucent tab bar background color
8+
$tab-bar-ios-translucent-background-color-alpha: .8 !default;
9+
10+
/// @prop - Translucent tab bar background color
11+
$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default;
12+
13+
/// @prop - Filter of the translucent tab bar background color
14+
$tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default;

‎core/src/components/tab-bar/tab-bar.md.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@
1212

1313
height: 56px;
1414
}
15+
16+
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
17+
background: transparent;
18+
}

‎core/src/components/tab-bar/test/spec/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,44 @@
146146
<ion-icon name="calendar"></ion-icon>
147147
</ion-tab-button>
148148
</ion-tab-bar>
149+
150+
<!-- Translucent -->
151+
<ion-tab-bar translucent>
152+
<ion-tab-button tab="1">
153+
<ion-icon name="heart"></ion-icon>
154+
</ion-tab-button>
155+
156+
<ion-tab-button tab="2">
157+
<ion-icon name="musical-note"></ion-icon>
158+
</ion-tab-button>
159+
160+
<ion-tab-button tab="3">
161+
<ion-icon name="today"></ion-icon>
162+
</ion-tab-button>
163+
164+
<ion-tab-button tab="4">
165+
<ion-icon name="calendar"></ion-icon>
166+
</ion-tab-button>
167+
</ion-tab-bar>
168+
169+
<!-- Translucent / Custom Color -->
170+
<ion-tab-bar translucent color="dark">
171+
<ion-tab-button tab="1">
172+
<ion-icon name="heart"></ion-icon>
173+
</ion-tab-button>
174+
175+
<ion-tab-button tab="2">
176+
<ion-icon name="musical-note"></ion-icon>
177+
</ion-tab-button>
178+
179+
<ion-tab-button tab="3">
180+
<ion-icon name="today"></ion-icon>
181+
</ion-tab-button>
182+
183+
<ion-tab-button tab="4">
184+
<ion-icon name="calendar"></ion-icon>
185+
</ion-tab-button>
186+
</ion-tab-bar>
149187

150188
<style>
151189
body {

‎core/src/components/tab-bar/test/translucent/e2e.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
test('tab-bar: translucent', async () => {
4+
const page = await newE2EPage({
5+
url: '/src/components/tab-bar/test/translucent?ionic:_testing=true'
6+
});
7+
8+
const compare = await page.compareScreenshot();
9+
expect(compare).toMatchScreenshot();
10+
});

‎core/src/components/tab-bar/test/translucent/index.html

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Tab Bar - Spec</title>
7+
<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">
8+
<script src="../../../../../scripts/testing/scripts.js"></script>
9+
<script src="../../../../../dist/ionic.js"></script>
10+
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
11+
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
12+
</head>
13+
14+
<body>
15+
<!-- Default -->
16+
<ion-tab-bar translucent selected-tab="1">
17+
18+
<ion-tab-button tab="1">
19+
<ion-label>Recents</ion-label>
20+
</ion-tab-button>
21+
22+
<ion-tab-button tab="2">
23+
<ion-label>Favorites</ion-label>
24+
<ion-badge>6</ion-badge>
25+
</ion-tab-button>
26+
27+
<ion-tab-button tab="3">
28+
<ion-label>Settings</ion-label>
29+
</ion-tab-button>
30+
31+
</ion-tab-bar>
32+
33+
<!-- Badges -->
34+
<ion-tab-bar translucent selected-tab="1">
35+
<ion-tab-button tab="1">
36+
<ion-icon name="heart"></ion-icon>
37+
<ion-label>Item One Max</ion-label>
38+
<ion-badge color="danger"></ion-badge>
39+
</ion-tab-button>
40+
41+
<ion-tab-button tab="2">
42+
<ion-icon name="musical-note"></ion-icon>
43+
</ion-tab-button>
44+
45+
<ion-tab-button tab="3">
46+
<ion-icon name="today"></ion-icon>
47+
<ion-badge color="danger">88</ion-badge>
48+
</ion-tab-button>
49+
50+
<ion-tab-button tab="4">
51+
<ion-icon name="calendar"></ion-icon>
52+
<ion-badge color="danger">888+</ion-badge>
53+
</ion-tab-button>
54+
</ion-tab-bar>
55+
56+
<ion-tab-bar translucent selected-tab="1">
57+
<ion-tab-button tab="1">
58+
<ion-icon name="musical-note"></ion-icon>
59+
</ion-tab-button>
60+
61+
<ion-tab-button tab="2" layout="icon-bottom">
62+
<ion-icon name="heart"></ion-icon>
63+
<ion-label>Item One Max</ion-label>
64+
<ion-badge color="danger"></ion-badge>
65+
</ion-tab-button>
66+
67+
<ion-tab-button tab="3">
68+
<ion-icon name="today"></ion-icon>
69+
<ion-badge color="danger">88</ion-badge>
70+
</ion-tab-button>
71+
72+
<ion-tab-button tab="4">
73+
<ion-icon name="calendar"></ion-icon>
74+
<ion-badge color="danger">888+</ion-badge>
75+
</ion-tab-button>
76+
</ion-tab-bar>
77+
78+
<ion-tab-bar translucent selected-tab="1">
79+
<ion-tab-button tab="1">
80+
<ion-icon name="heart"></ion-icon>
81+
</ion-tab-button>
82+
83+
<ion-tab-button tab="2">
84+
<ion-icon name="musical-note"></ion-icon>
85+
</ion-tab-button>
86+
87+
<ion-tab-button tab="3">
88+
<ion-icon name="today"></ion-icon>
89+
</ion-tab-button>
90+
</ion-tab-bar>
91+
92+
<ion-tab-bar translucent selected-tab="1">
93+
<ion-tab-button tab="1">
94+
<ion-icon name="musical-note"></ion-icon>
95+
</ion-tab-button>
96+
97+
<ion-tab-button tab="2" layout="icon-bottom">
98+
<ion-icon name="heart"></ion-icon>
99+
<ion-label>Item One Max</ion-label>
100+
<ion-badge color="danger">88</ion-badge>
101+
</ion-tab-button>
102+
103+
<ion-tab-button tab="3">
104+
<ion-icon name="today"></ion-icon>
105+
</ion-tab-button>
106+
107+
<ion-tab-button tab="4">
108+
<ion-icon name="calendar"></ion-icon>
109+
</ion-tab-button>
110+
</ion-tab-bar>
111+
112+
<!-- Custom Height -->
113+
<ion-tab-bar translucent color="danger" selected-tab="3" class="custom-height">
114+
<ion-tab-button tab="1">
115+
<ion-icon name="heart"></ion-icon>
116+
</ion-tab-button>
117+
118+
<ion-tab-button tab="2">
119+
<ion-icon name="musical-note"></ion-icon>
120+
</ion-tab-button>
121+
122+
<ion-tab-button tab="3">
123+
<ion-icon name="today"></ion-icon>
124+
</ion-tab-button>
125+
126+
<ion-tab-button tab="4">
127+
<ion-icon name="calendar"></ion-icon>
128+
</ion-tab-button>
129+
</ion-tab-bar>
130+
131+
<!-- Custom Height / Alignment -->
132+
<ion-tab-bar translucent color="tertiary" selected-tab="3" class="custom-height custom-top">
133+
<ion-tab-button tab="1">
134+
<ion-icon name="heart"></ion-icon>
135+
</ion-tab-button>
136+
137+
<ion-tab-button tab="2">
138+
<ion-icon name="musical-note"></ion-icon>
139+
</ion-tab-button>
140+
141+
<ion-tab-button tab="3">
142+
<ion-icon name="today"></ion-icon>
143+
</ion-tab-button>
144+
145+
<ion-tab-button tab="4">
146+
<ion-icon name="calendar"></ion-icon>
147+
</ion-tab-button>
148+
</ion-tab-bar>
149+
150+
<!-- Translucent -->
151+
<ion-tab-bar translucent>
152+
<ion-tab-button tab="1">
153+
<ion-icon name="heart"></ion-icon>
154+
</ion-tab-button>
155+
156+
<ion-tab-button tab="2">
157+
<ion-icon name="musical-note"></ion-icon>
158+
</ion-tab-button>
159+
160+
<ion-tab-button tab="3">
161+
<ion-icon name="today"></ion-icon>
162+
</ion-tab-button>
163+
164+
<ion-tab-button tab="4">
165+
<ion-icon name="calendar"></ion-icon>
166+
</ion-tab-button>
167+
</ion-tab-bar>
168+
169+
<!-- Translucent / Custom Color -->
170+
<ion-tab-bar translucent class="custom-background">
171+
<ion-tab-button tab="1">
172+
<ion-icon name="heart"></ion-icon>
173+
</ion-tab-button>
174+
175+
<ion-tab-button tab="2">
176+
<ion-icon name="musical-note"></ion-icon>
177+
</ion-tab-button>
178+
179+
<ion-tab-button tab="3">
180+
<ion-icon name="today"></ion-icon>
181+
</ion-tab-button>
182+
183+
<ion-tab-button tab="4">
184+
<ion-icon name="calendar"></ion-icon>
185+
</ion-tab-button>
186+
</ion-tab-bar>
187+
188+
<style>
189+
body {
190+
background: linear-gradient(
191+
to right, orange , yellow, green, cyan, blue, violet
192+
);
193+
}
194+
195+
ion-tab-bar {
196+
margin-bottom: 5px;
197+
}
198+
199+
.custom-height {
200+
height: 80px;
201+
}
202+
203+
.custom-top ion-tab-button {
204+
justify-content: start;
205+
}
206+
207+
.custom-background {
208+
--background: rgba(124, 243, 217, 0.6);
209+
}
210+
</style>
211+
</body>
212+
213+
</html>

0 commit comments

Comments
 (0)