Skip to content

Commit e79dcc8

Browse files
ilhan007ilhan007
authored
feat(ui5-tabcontainer): add tabLayout property (#1214)
Add new property "tabLayout" to provide two types of alignment of the tab main and additional texts Fixes: #1195
1 parent 02ddd0d commit e79dcc8

File tree

6 files changed

+222
-43
lines changed

6 files changed

+222
-43
lines changed

‎packages/main/src/TabContainer.hbs

+22-33
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,10 @@
2525
?disabled="{{this.disabled}}"
2626
aria-labelledby="{{this.ariaLabelledBy}}"
2727
>
28-
{{#if this.isTextOnlyTab}}
29-
{{> textOnlyTab}}
30-
{{/if}}
31-
32-
{{#if this.isIconTab}}
33-
{{> iconTab}}
34-
{{/if}}
35-
36-
{{#if this.isMixedModeTab}}
37-
{{> mixedModeTab}}
28+
{{#if this.isInline}}
29+
{{> inlineTab}}
30+
{{else}}
31+
{{> standardTab}}
3832
{{/if}}
3933
</li>
4034
{{/unless}}
@@ -71,23 +65,12 @@
7165
</div>
7266
</div>
7367

74-
{{#*inline "textOnlyTab"}}
75-
<div class="{{this.headerItemContentClasses}}">
76-
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
77-
<span class="{{this.headerItemSemanticIconClasses}}"></span>
78-
{{this.item.text}}
79-
</span>
80-
81-
{{#if this.item.additionalText}}
82-
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span>
83-
{{/if}}
84-
</div>
85-
{{/inline}}
86-
87-
{{#*inline "iconTab"}}
88-
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
89-
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
90-
</div>
68+
{{#*inline "standardTab"}}
69+
{{#if this.item.icon}}
70+
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
71+
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
72+
</div>
73+
{{/if}}
9174

9275
<div class="{{this.headerItemContentClasses}}">
9376
{{#if this.item.additionalText}}
@@ -103,17 +86,23 @@
10386
</div>
10487
{{/inline}}
10588

106-
{{#*inline "mixedModeTab"}}
107-
<div class="{{this.headerItemContentClasses}}">
108-
{{#if this.item.additionalText}}
109-
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
110-
{{/if}}
89+
{{#*inline "inlineTab"}}
90+
{{#if this.item.icon}}
91+
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
92+
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
93+
</div>
94+
{{/if}}
11195

96+
<div class="{{this.headerItemContentClasses}}">
11297
{{#if this.item.text}}
11398
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
11499
<span class="{{this.headerItemSemanticIconClasses}}"></span>
115100
{{this.item.text}}
116101
</span>
117102
{{/if}}
103+
104+
{{#if this.item.additionalText}}
105+
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
106+
{{/if}}
118107
</div>
119-
{{/inline}}
108+
{{/inline}}

‎packages/main/src/TabContainer.js

+31-3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopov
2525
import tabContainerCss from "./generated/themes/TabContainer.css.js";
2626
import tabContainerPopoverCss from "./generated/themes/TabContainerPopup.css.js";
2727
import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
28+
import TabLayout from "./types/TabLayout.js";
2829

2930
const SCROLL_STEP = 128;
3031

@@ -51,7 +52,7 @@ const metadata = {
5152
},
5253
properties: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
5354
/**
54-
* Determines whether the tabs are in a fixed state that is not
55+
* Defines whether the tabs are in a fixed state that is not
5556
* expandable/collapsible by user interaction.
5657
*
5758
* @type {Boolean}
@@ -63,7 +64,7 @@ const metadata = {
6364
},
6465

6566
/**
66-
* Determines whether the tab content is collapsed.
67+
* Defines whether the tab content is collapsed.
6768
*
6869
* @type {Boolean}
6970
* @defaultvalue false
@@ -74,7 +75,7 @@ const metadata = {
7475
},
7576

7677
/**
77-
* Specifies if the overflow select list is displayed.
78+
* Defines whether the overflow select list is displayed.
7879
* <br><br>
7980
* The overflow select list represents a list, where all tab filters are displayed
8081
* so that it's easier for the user to select a specific tab filter.
@@ -87,6 +88,28 @@ const metadata = {
8788
type: Boolean,
8889
},
8990

91+
/**
92+
* Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.
93+
* <br>
94+
* <b>Note:</b>
95+
* The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt,
96+
* but when set to <code>Inline</code>, they would be displayed horizontally.
97+
* <br><br>
98+
* Available options are:
99+
* <ul>
100+
* <li><code>Standard</code></li>
101+
* <li><code>Inline</code></li>
102+
* <ul>
103+
*
104+
* @type {String}
105+
* @defaultvalue "Standard"
106+
* @public
107+
*/
108+
tabLayout: {
109+
type: String,
110+
defaultValue: TabLayout.Standard,
111+
},
112+
90113
_selectedTab: {
91114
type: Object,
92115
},
@@ -226,6 +249,7 @@ class TabContainer extends UI5Element {
226249

227250
return {
228251
item,
252+
isInline: this.tabLayout === TabLayout.Inline,
229253
isMixedModeTab: !item.icon && this.mixedMode,
230254
isTextOnlyTab: !item.icon && !this.mixedMode,
231255
isIconTab: item.icon,
@@ -491,6 +515,10 @@ const calculateHeaderItemClasses = (item, mixedMode) => {
491515
classes.push("ui5-tc__headerItem--disabled");
492516
}
493517

518+
if (item.tabLayout === TabLayout.Inline) {
519+
classes.push("ui5-tc__headerItem--inline");
520+
}
521+
494522
if (!item.icon && !mixedMode) {
495523
classes.push("ui5-tc__headerItem--textOnly");
496524
}

‎packages/main/src/themes/TabContainer.css

+14-2
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,12 @@
9898
}
9999

100100
.ui5-tc__headerItem--withIcon:focus .ui5-tc-headerItemIcon-outer,
101+
.ui5-tc__headerItem--textOnly:not(.ui5-tc__headerItem--inline):focus .ui5-tc__headerItemText {
102+
outline: var(--_ui5_tc_headerItem_focus_border);
103+
}
104+
101105
.ui5-tc__headerItem--mixedMode:focus .ui5-tc__headerItemContent,
102-
.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
106+
.ui5-tc__headerItem--inline.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
103107
outline: var(--_ui5_tc_headerItem_focus_border);
104108
}
105109

@@ -161,10 +165,18 @@
161165
text-shadow: none;
162166
}
163167

164-
.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
168+
.ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
165169
display: block;
170+
}
171+
172+
.ui5-tc__headerItem--inline .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
173+
display: inline;
174+
}
175+
176+
.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
166177
margin-top: var(--_ui5_tc_item_add_text_margin_top);
167178
}
179+
168180
/*** END Icon and text Tab styles ***/
169181

170182
/*** TextOnly Tab styles ***/

‎packages/main/src/types/TabLayout.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* @lends sap.ui.webcomponents.main.types.TabLayout.prototype
5+
* @public
6+
*/
7+
const TabLayouts = {
8+
/**
9+
* Inline type, the tab <code>main text</code> and <code>additionalText</code> are displayed horizotally.
10+
* @public
11+
* @type {Inline}
12+
*/
13+
Inline: "Inline",
14+
15+
/**
16+
* Standard type, the tab <code>main text</code> and <code>additionalText</code> are displayed vertically.
17+
* @public
18+
* @type {Standard}
19+
*/
20+
Standard: "Standard",
21+
};
22+
23+
/**
24+
* @class
25+
* Different types of Tab layouts.
26+
* @constructor
27+
* @author SAP SE
28+
* @alias sap.ui.webcomponents.main.types.TabLayout
29+
* @public
30+
* @enum {string}
31+
*/
32+
class TabLayout extends DataType {
33+
static isValid(value) {
34+
return !!TabLayouts[value];
35+
}
36+
}
37+
38+
TabLayout.generataTypeAcessors(TabLayouts);
39+
40+
export default TabLayout;

‎packages/main/test/pages/TabContainer.html

+41-4
Original file line numberDiff line numberDiff line change
@@ -226,14 +226,34 @@ <h2>Text only</h2>
226226
<h2>Icon and Text</h2>
227227

228228
<ui5-tabcontainer show-overflow="true">
229-
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123" selected>
229+
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
230230
<div style="height: 300px">
231231
<h4>Content with set height: 300px</h4>
232232
<ui5-button>Button 11</ui5-button>
233233
<ui5-button>Button 12</ui5-button>
234234
</div>
235235
</ui5-tab>
236-
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444">
236+
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
237+
<ui5-button>Button 2</ui5-button>
238+
</ui5-tab>
239+
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
240+
<ui5-button>Button 3</ui5-button>
241+
</ui5-tab>
242+
</ui5-tabcontainer>
243+
</section>
244+
245+
<section>
246+
<h2>Icon and Text with tabLayout="Inline"</h2>
247+
248+
<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
249+
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
250+
<div style="height: 300px">
251+
<h4>Content with set height: 300px</h4>
252+
<ui5-button>Button 11</ui5-button>
253+
<ui5-button>Button 12</ui5-button>
254+
</div>
255+
</ui5-tab>
256+
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
237257
<ui5-button>Button 2</ui5-button>
238258
</ui5-tab>
239259
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
@@ -246,11 +266,11 @@ <h4>Content with set height: 300px</h4>
246266
<h2>Text and additional text</h2>
247267

248268
<ui5-tabcontainer show-overflow="true">
249-
<ui5-tab text="Tab 1" additional-text="additional" selected>
269+
<ui5-tab text="Tab 1" additional-text="additional">
250270
<ui5-button>Button 11</ui5-button>
251271
<ui5-button>Button 12</ui5-button>
252272
</ui5-tab>
253-
<ui5-tab text="Tab 2" additional-text="additional">
273+
<ui5-tab text="Tab 2" additional-text="additional" selected>
254274
<ui5-button>Button 2</ui5-button>
255275
</ui5-tab>
256276
<ui5-tab text="Tab 3" additional-text="additional">
@@ -259,6 +279,23 @@ <h2>Text and additional text</h2>
259279
</ui5-tabcontainer>
260280
</section>
261281

282+
<section>
283+
<h2>Text and additional text with tabLayout="Inline"</h2>
284+
285+
<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
286+
<ui5-tab text="Monitors" additional-text="10">
287+
<ui5-button>Button 11</ui5-button>
288+
<ui5-button>Button 12</ui5-button>
289+
</ui5-tab>
290+
<ui5-tab text="Cameras" additional-text="2" selected>
291+
<ui5-button>Button 2</ui5-button>
292+
</ui5-tab>
293+
<ui5-tab text="Rooms" additional-text="16">
294+
<ui5-button>Button 3</ui5-button>
295+
</ui5-tab>
296+
</ui5-tabcontainer>
297+
</section>
298+
262299
<section>
263300
<h2>Tabs with input elements</h2>
264301

0 commit comments

Comments
 (0)