Skip to content

Commit f555a14

Browse files
thetaPCthetaPC
committed
refactor(tab-bar): add shape prop
1 parent a589deb commit f555a14

File tree

8 files changed

+157
-12
lines changed

8 files changed

+157
-12
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2180,6 +2180,7 @@ ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "sec
21802180
ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
21812181
ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
21822182
ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
2183+
ion-tab-bar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
21832184
ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
21842185
ion-tab-bar,prop,translucent,boolean,false,false,false
21852186
ion-tab-bar,css-prop,--background,ionic

‎core/src/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3423,6 +3423,10 @@ export namespace Components {
34233423
* The selected tab component
34243424
*/
34253425
"selectedTab"?: string;
3426+
/**
3427+
* Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
3428+
*/
3429+
"shape"?: 'soft' | 'round' | 'rectangular';
34263430
/**
34273431
* The theme determines the visual appearance of the component.
34283432
*/
@@ -8783,6 +8787,10 @@ declare namespace LocalJSX {
87838787
* The selected tab component
87848788
*/
87858789
"selectedTab"?: string;
8790+
/**
8791+
* Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
8792+
*/
8793+
"shape"?: 'soft' | 'round' | 'rectangular';
87868794
/**
87878795
* The theme determines the visual appearance of the component.
87888796
*/

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,10 @@
5050
display: none !important;
5151
}
5252

53-
// Expand: Full
53+
// Tab Bar Expand
5454
// --------------------------------------------------
55+
56+
/* Full */
5557
:host(.tab-bar-full) {
5658
width: auto;
5759

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@
3333
z-index: 10;
3434
}
3535

36-
// Expand: Compact
36+
// Tab Bar Expand
3737
// --------------------------------------------------
38+
39+
/* Compact */
3840
:host(.tab-bar-compact) {
3941
position: absolute;
4042

@@ -47,10 +49,28 @@
4749
contain: content;
4850
}
4951

50-
:host([slot="top"].tab-bar-expand-compact) {
52+
:host([slot="top"].tab-bar-compact) {
5153
top: globals.$ionic-space-400;
5254
}
5355

54-
:host([slot="bottom"].tab-bar-expand-compact) {
56+
:host([slot="bottom"].tab-bar-compact) {
5557
bottom: globals.$ionic-space-400;
5658
}
59+
60+
// Tab Bar Shapes
61+
// --------------------------------------------------
62+
63+
/* Soft */
64+
:host(.tab-bar-soft) {
65+
@include globals.border-radius(globals.$ionic-border-radius-400);
66+
}
67+
68+
/* Round */
69+
:host(.tab-bar-round) {
70+
@include globals.border-radius(globals.$ionic-border-radius-full);
71+
}
72+
73+
/* Rectangular */
74+
:host(.tab-bar-rectangular) {
75+
@include globals.border-radius(globals.$ionic-border-radius-0);
76+
}

‎core/src/components/tab-bar/tab-bar.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ export class TabBar implements ComponentInterface {
4949
}
5050
}
5151

52+
/**
53+
* If `true`, the tab bar will be translucent.
54+
* Only applies when the theme is `"ios"` and the device supports
55+
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
56+
*/
57+
@Prop() translucent = false;
58+
5259
/**
5360
* Set to `"compact"` to display a width based on the items
5461
* inside the tab bar. This value will only work for the
@@ -61,11 +68,13 @@ export class TabBar implements ComponentInterface {
6168
@Prop() expand: 'compact' | 'full' = 'full';
6269

6370
/**
64-
* If `true`, the tab bar will be translucent.
65-
* Only applies when the theme is `"ios"` and the device supports
66-
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
71+
* Set to `"soft"` for a tab bar with slightly rounded corners,
72+
* `"round"` for a tab bar with fully rounded corners, or
73+
* `"rectangular"` for a tab bar without rounded corners.
74+
*
75+
* Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
6776
*/
68-
@Prop() translucent = false;
77+
@Prop() shape?: 'soft' | 'round' | 'rectangular';
6978

7079
/** @internal */
7180
@Event() ionTabBarChanged!: EventEmitter<TabBarChangedEventDetail>;
@@ -108,7 +117,7 @@ export class TabBar implements ComponentInterface {
108117
}
109118

110119
render() {
111-
const { color, translucent, keyboardVisible } = this;
120+
const { color, translucent, keyboardVisible, expand, shape } = this;
112121
const theme = getIonTheme(this);
113122
const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
114123

@@ -120,7 +129,8 @@ export class TabBar implements ComponentInterface {
120129
[theme]: true,
121130
'tab-bar-translucent': translucent,
122131
'tab-bar-hidden': shouldHide,
123-
[`tab-bar-${this.expand}`]: true,
132+
[`tab-bar-${expand}`]: true,
133+
[`tab-bar-${shape}`]: shape !== undefined,
124134
})}
125135
>
126136
<slot></slot>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Tab Bar - Preview</title>
5+
<title>Tab Bar - Expand</title>
66
<meta
77
name="viewport"
88
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Tab Bar - Shape</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<script src="../../../../../scripts/testing/scripts.js"></script>
11+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
12+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
13+
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
14+
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-content>
20+
<h2>Default</h2>
21+
<ion-tab-bar selected-tab="1" expand="compact">
22+
<ion-tab-button tab="1">
23+
<ion-icon name="triangle-outline"></ion-icon>
24+
<ion-label>Label</ion-label>
25+
</ion-tab-button>
26+
27+
<ion-tab-button tab="2">
28+
<ion-icon name="triangle-outline"></ion-icon>
29+
<ion-label>Label</ion-label>
30+
</ion-tab-button>
31+
32+
<ion-tab-button tab="3" class="ion-focused">
33+
<ion-icon name="triangle-outline"></ion-icon>
34+
<ion-label>Label</ion-label>
35+
</ion-tab-button>
36+
</ion-tab-bar>
37+
38+
<h2>Soft</h2>
39+
<ion-tab-bar selected-tab="1" expand="compact" shape="soft">
40+
<ion-tab-button tab="1">
41+
<ion-icon name="triangle-outline"></ion-icon>
42+
<ion-label>Label</ion-label>
43+
</ion-tab-button>
44+
45+
<ion-tab-button tab="2">
46+
<ion-icon name="triangle-outline"></ion-icon>
47+
<ion-label>Label</ion-label>
48+
</ion-tab-button>
49+
50+
<ion-tab-button tab="3" class="ion-focused">
51+
<ion-icon name="triangle-outline"></ion-icon>
52+
<ion-label>Label</ion-label>
53+
</ion-tab-button>
54+
</ion-tab-bar>
55+
56+
<h2>Round</h2>
57+
<ion-tab-bar selected-tab="1" expand="compact" shape="round">
58+
<ion-tab-button tab="1">
59+
<ion-icon name="triangle-outline"></ion-icon>
60+
<ion-label>Label</ion-label>
61+
</ion-tab-button>
62+
63+
<ion-tab-button tab="2">
64+
<ion-icon name="triangle-outline"></ion-icon>
65+
<ion-label>Label</ion-label>
66+
</ion-tab-button>
67+
68+
<ion-tab-button tab="3" class="ion-focused">
69+
<ion-icon name="triangle-outline"></ion-icon>
70+
<ion-label>Label</ion-label>
71+
</ion-tab-button>
72+
</ion-tab-bar>
73+
74+
<h2>Rectangular</h2>
75+
<ion-tab-bar selected-tab="1" expand="compact" shape="rectangular">
76+
<ion-tab-button tab="1">
77+
<ion-icon name="triangle-outline"></ion-icon>
78+
<ion-label>Label</ion-label>
79+
</ion-tab-button>
80+
81+
<ion-tab-button tab="2">
82+
<ion-icon name="triangle-outline"></ion-icon>
83+
<ion-label>Label</ion-label>
84+
</ion-tab-button>
85+
86+
<ion-tab-button tab="3" class="ion-focused">
87+
<ion-icon name="triangle-outline"></ion-icon>
88+
<ion-label>Label</ion-label>
89+
</ion-tab-button>
90+
</ion-tab-bar>
91+
</ion-content>
92+
</ion-app>
93+
94+
<style>
95+
ion-content {
96+
--background: #f6f6f6;
97+
}
98+
99+
.ionic ion-tab-bar {
100+
position: static;
101+
}
102+
</style>
103+
</body>
104+
</html>

‎core/src/components/tabs/test/basic/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h1>Hidden Tab</h1>
8888

8989
<ion-tab tab="tab-four" component="page-one"></ion-tab>
9090

91-
<ion-tab-bar slot="bottom">
91+
<ion-tab-bar slot="bottom" expand="compact">
9292
<ion-tab-button href="" tab="tab-one" class="e2eTabOneButton">
9393
<ion-label>Tab One</ion-label>
9494
<ion-icon name="star"></ion-icon>

0 commit comments

Comments
 (0)