@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/AI_USAGE.md +425 -0
- package/data/CHANGELOG.md +53 -3
- package/data/component-catalog.json +62 -209
- package/data/components/README.md +281 -0
- package/data/components/action-bar.md +443 -0
- package/data/components/ai-busy-indicator.md +79 -0
- package/data/components/ai-loading-bar.md +66 -0
- package/data/components/avatar-btp.md +198 -0
- package/data/components/avatar-group.md +2660 -0
- package/data/components/avatar-product-switch.md +476 -0
- package/data/components/avatar.md +993 -0
- package/data/components/bar.md +574 -0
- package/data/components/border-radius.md +148 -0
- package/data/components/border.md +412 -0
- package/data/components/breadcrumb.md +546 -0
- package/data/components/button-2.md +440 -0
- package/data/components/button-action-sheet.md +292 -0
- package/data/components/button-ai.md +730 -0
- package/data/components/button-btp.md +223 -0
- package/data/components/button-button.md +233 -0
- package/data/components/button-counter.md +176 -0
- package/data/components/button-patterns.md +731 -0
- package/data/components/button-split.md +459 -0
- package/data/components/button.md +469 -0
- package/data/components/calendar.md +5784 -0
- package/data/components/card-card-media.md +707 -0
- package/data/components/card-card.md +2426 -0
- package/data/components/card-layouts.md +1201 -0
- package/data/components/card.md +2404 -0
- package/data/components/carousel.md +1506 -0
- package/data/components/code.md +139 -0
- package/data/components/component-reset.md +272 -0
- package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
- package/data/components/components-icons-sap-icons.md +147 -0
- package/data/components/components-icons-tnt-icons.md +85 -0
- package/data/components/container-queries.md +221 -0
- package/data/components/container.md +227 -0
- package/data/components/dialog-docs-static-busy-indicator.md +165 -0
- package/data/components/dialog-docs-static-dialog.md +949 -0
- package/data/components/dialog-docs-static-patterns.md +147 -0
- package/data/components/dialog-docs-static-settings.md +528 -0
- package/data/components/dialog-docs-static.md +982 -0
- package/data/components/dialog.md +606 -0
- package/data/components/dynamic-page-dynamic-page.md +1914 -0
- package/data/components/dynamic-page.md +973 -0
- package/data/components/dynamic-side.md +197 -0
- package/data/components/elevation.md +110 -0
- package/data/components/feed-input.md +346 -0
- package/data/components/feed-list.md +580 -0
- package/data/components/fieldset-2.md +292 -0
- package/data/components/fieldset-forms.md +169 -0
- package/data/components/fieldset.md +381 -0
- package/data/components/flexible-column-layout.md +205 -0
- package/data/components/form-group.md +287 -0
- package/data/components/form-header.md +71 -0
- package/data/components/form-item-2.md +98 -0
- package/data/components/form-item-3.md +134 -0
- package/data/components/form-item-4.md +556 -0
- package/data/components/form-item-5.md +182 -0
- package/data/components/form-item-6.md +539 -0
- package/data/components/form-item-7.md +239 -0
- package/data/components/form-item-ai.md +158 -0
- package/data/components/form-item-file-uploader.md +445 -0
- package/data/components/form-item-forms.md +234 -0
- package/data/components/form-item-patterns.md +426 -0
- package/data/components/form-item.md +464 -0
- package/data/components/form-label-ai.md +126 -0
- package/data/components/form-label-layouts.md +306 -0
- package/data/components/form-label-patterns.md +1175 -0
- package/data/components/form-label-status-indicator.md +1083 -0
- package/data/components/form-label-step-input.md +620 -0
- package/data/components/form-label.md +2876 -0
- package/data/components/generic-tag.md +747 -0
- package/data/components/grid-list-grid-list.md +1185 -0
- package/data/components/grid-list.md +1449 -0
- package/data/components/heading.md +66 -0
- package/data/components/horizontal-navigation.md +568 -0
- package/data/components/icon-tab-bar-dev.md +190 -0
- package/data/components/icon-tab-bar.md +2620 -0
- package/data/components/icon.md +171 -0
- package/data/components/iconBusinessSuite.md +92 -0
- package/data/components/iconTnt.md +92 -0
- package/data/components/illustrated-message.md +439 -0
- package/data/components/info-label.md +348 -0
- package/data/components/input-group.md +2068 -0
- package/data/components/label.md +66 -0
- package/data/components/layout-grid.md +447 -0
- package/data/components/layout-panel.md +261 -0
- package/data/components/layouts-layout-grid.md +608 -0
- package/data/components/layouts-paddings.md +133 -0
- package/data/components/layouts-section.md +287 -0
- package/data/components/list-2.md +148 -0
- package/data/components/list-3.md +735 -0
- package/data/components/list-list.md +790 -0
- package/data/components/list-object-list.md +1225 -0
- package/data/components/list.md +1286 -0
- package/data/components/media-queries.md +168 -0
- package/data/components/menu.md +946 -0
- package/data/components/message-box-docs-static-ai.md +149 -0
- package/data/components/message-box-docs-static.md +527 -0
- package/data/components/message-page-upload-collection.md +678 -0
- package/data/components/message-page.md +256 -0
- package/data/components/message-strip.md +977 -0
- package/data/components/message-toast.md +119 -0
- package/data/components/micro-process-flow.md +991 -0
- package/data/components/navigation-menu.md +366 -0
- package/data/components/navigation-navigation.md +1245 -0
- package/data/components/navigation.md +2604 -0
- package/data/components/numeric-content.md +317 -0
- package/data/components/object-attribute.md +96 -0
- package/data/components/object-identifier.md +227 -0
- package/data/components/object-marker.md +202 -0
- package/data/components/object-number.md +327 -0
- package/data/components/object-status.md +1538 -0
- package/data/components/off-screen.md +87 -0
- package/data/components/overflow.md +97 -0
- package/data/components/padding.md +122 -0
- package/data/components/paddings.md +130 -0
- package/data/components/page.md +300 -0
- package/data/components/pagination.md +672 -0
- package/data/components/panel-layouts.md +345 -0
- package/data/components/panel.md +514 -0
- package/data/components/patterns-label.md +74 -0
- package/data/components/popover-2.md +906 -0
- package/data/components/popover-ai.md +466 -0
- package/data/components/popover-btp.md +886 -0
- package/data/components/popover-deprecated.md +308 -0
- package/data/components/popover-message-popover.md +683 -0
- package/data/components/popover-notification.md +1511 -0
- package/data/components/popover-patterns.md +1100 -0
- package/data/components/popover-popover.md +1862 -0
- package/data/components/popover-quick-view.md +385 -0
- package/data/components/popover-timepicker.md +1836 -0
- package/data/components/popover-user-menu.md +1303 -0
- package/data/components/popover.md +1938 -0
- package/data/components/progress-indicator.md +351 -0
- package/data/components/prompt-input-ai.md +226 -0
- package/data/components/prompt-input.md +226 -0
- package/data/components/rating-indicator.md +1469 -0
- package/data/components/resizable-card-layout.md +951 -0
- package/data/components/scrollbar.md +86 -0
- package/data/components/search-field.md +287 -0
- package/data/components/section.md +250 -0
- package/data/components/segmented-button.md +324 -0
- package/data/components/shellbar.md +2183 -0
- package/data/components/side-nav.md +1562 -0
- package/data/components/skeleton.md +243 -0
- package/data/components/slider.md +395 -0
- package/data/components/splitter.md +353 -0
- package/data/components/table.md +2749 -0
- package/data/components/tabs.md +658 -0
- package/data/components/text-text.md +380 -0
- package/data/components/text.md +253 -0
- package/data/components/tile.md +1132 -0
- package/data/components/time.md +818 -0
- package/data/components/title.md +153 -0
- package/data/components/titles.md +83 -0
- package/data/components/token.md +311 -0
- package/data/components/tokenizer.md +398 -0
- package/data/components/tool-header.md +1352 -0
- package/data/components/tool-layout.md +199 -0
- package/data/components/toolbar-ai.md +174 -0
- package/data/components/toolbar-btp.md +526 -0
- package/data/components/toolbar-title-bar.md +473 -0
- package/data/components/toolbar.md +432 -0
- package/data/components/tree.md +1031 -0
- package/data/components/typography.md +435 -0
- package/data/components/variant-management.md +360 -0
- package/data/components/vertical-nav.md +589 -0
- package/data/components/wizard.md +1429 -0
- package/data/examples/Components/dialog/device-specifications.example.html +39 -30
- package/data/examples/Components/shellbar/optional-items.example.html +210 -157
- package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
- package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
- package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
- package/data/examples/Components/user-menu/default.example.html +241 -83
- package/data/schemas/badge.schema.json +1 -1
- package/data/schemas/button-split.schema.json +1 -1
- package/data/schemas/component-frontmatter.schema.json +123 -0
- package/data/schemas/component-markdown.schema.json +81 -0
- package/data/schemas/counter.schema.json +1 -1
- package/data/schemas/dynamic-page.schema.json +1 -1
- package/data/schemas/dynamic-side-content.schema.json +1 -1
- package/data/schemas/facet.schema.json +1 -1
- package/data/schemas/fieldset.schema.json +1 -1
- package/data/schemas/flexible-column-layout.schema.json +1 -1
- package/data/schemas/form-group.schema.json +3 -2
- package/data/schemas/form-header.schema.json +1 -1
- package/data/schemas/form-label.schema.json +1 -0
- package/data/schemas/form-message.schema.json +1 -1
- package/data/schemas/grid-list.schema.json +1 -1
- package/data/schemas/input-group.schema.json +1 -1
- package/data/schemas/layout-panel.schema.json +1 -1
- package/data/schemas/page.schema.json +1 -1
- package/data/schemas/quick-view.schema.json +2 -1
- package/data/schemas/section.schema.json +1 -1
- package/data/schemas/side-nav.schema.json +1 -1
- package/data/schemas/splitter.schema.json +1 -1
- package/data/schemas/tabs.schema.json +1 -1
- package/data/schemas/tile.schema.json +1 -1
- package/data/schemas/tool-layout.schema.json +1 -1
- package/data/schemas/user-menu.schema.json +10 -0
- package/data/schemas/wizard.schema.json +1 -1
- package/package.json +1 -1
- package/src/data/load-catalog.d.ts +2 -0
- package/src/data/load-catalog.js +5 -1
- package/src/data/load-catalog.js.map +1 -1
- package/src/data/load-markdown-docs.d.ts +44 -0
- package/src/data/load-markdown-docs.js +179 -0
- package/src/data/load-markdown-docs.js.map +1 -0
- package/src/data/markdown-cache.d.ts +60 -0
- package/src/data/markdown-cache.js +218 -0
- package/src/data/markdown-cache.js.map +1 -0
- package/src/server.js +72 -1
- package/src/server.js.map +1 -1
|
@@ -0,0 +1,2620 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: fd-icon-tab-bar
|
|
3
|
+
title: Components/Icon Tab Bar
|
|
4
|
+
category: Components
|
|
5
|
+
selector: fd-icon-tab-bar
|
|
6
|
+
cssFile: icon-tab-bar.css
|
|
7
|
+
sourcePath: packages/styles/stories/Components/icon-tab-bar/icon-tab-bar.stories.js
|
|
8
|
+
tags: []
|
|
9
|
+
dependencies: ["button","icon","icon-tab-bar","list","menu","popover"]
|
|
10
|
+
relatedComponents: ["button","icon","icon-tab-bar","list","menu","popover"]
|
|
11
|
+
stability: stable
|
|
12
|
+
generatedAt: 2026-06-09T18:29:01.545Z
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Components/Icon Tab Bar
|
|
16
|
+
|
|
17
|
+
The Icon Tab Bar can be used for navigation within an object, or as a filter. Each tab of the component links to a different content area or view.
|
|
18
|
+
|
|
19
|
+
##Usage
|
|
20
|
+
**Use the icon tab bar if:**
|
|
21
|
+
|
|
22
|
+
- Your business objects need to show multiple facets at the same time.
|
|
23
|
+
- You want to allow the user to browse through these facets.
|
|
24
|
+
- You need a prominent or very visual filter on top of a list.
|
|
25
|
+
- You have clear-cut process steps that need to be visualized.
|
|
26
|
+
|
|
27
|
+
**Do not use the icon tab bar if:**
|
|
28
|
+
|
|
29
|
+
- You plan to use only a single tab.
|
|
30
|
+
|
|
31
|
+
##Semantic colors
|
|
32
|
+
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors. To add semantic color to a tab use a modifier class from the table below on \
|
|
33
|
+
|
|
34
|
+
## Usage Guidelines
|
|
35
|
+
|
|
36
|
+
**Use the icon tab bar if:**
|
|
37
|
+
|
|
38
|
+
- Your business objects need to show multiple facets at the same time.
|
|
39
|
+
- You want to allow the user to browse through these facets.
|
|
40
|
+
- You need a prominent or very visual filter on top of a list.
|
|
41
|
+
- You have clear-cut process steps that need to be visualized.
|
|
42
|
+
|
|
43
|
+
## When Not To Use
|
|
44
|
+
|
|
45
|
+
- You plan to use only a single tab.
|
|
46
|
+
|
|
47
|
+
## Dependencies
|
|
48
|
+
|
|
49
|
+
This component depends on the following CSS files:
|
|
50
|
+
|
|
51
|
+
- `button.css`
|
|
52
|
+
- `icon.css`
|
|
53
|
+
- `icon-tab-bar.css`
|
|
54
|
+
- `list.css`
|
|
55
|
+
- `menu.css`
|
|
56
|
+
- `popover.css`
|
|
57
|
+
|
|
58
|
+
## Installation
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npm install fundamental-styles
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<!-- Include theme -->
|
|
66
|
+
<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
|
|
67
|
+
|
|
68
|
+
<!-- Include component CSS -->
|
|
69
|
+
<link href="node_modules/fundamental-styles/dist/icon-tab-bar.css" rel="stylesheet">
|
|
70
|
+
|
|
71
|
+
<!-- Include dependencies -->
|
|
72
|
+
<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
|
|
73
|
+
<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
|
|
74
|
+
<link href="node_modules/fundamental-styles/dist/icon-tab-bar.css" rel="stylesheet">
|
|
75
|
+
<link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
|
|
76
|
+
<link href="node_modules/fundamental-styles/dist/menu.css" rel="stylesheet">
|
|
77
|
+
<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Basic Usage
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<div class="fd-icon-tab-bar">
|
|
84
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
85
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
86
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
87
|
+
<span class="fd-icon-tab-bar__tag">Info</span>
|
|
88
|
+
</a>
|
|
89
|
+
</li>
|
|
90
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
91
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
92
|
+
<span class="fd-icon-tab-bar__tag">Attachments (16)</span>
|
|
93
|
+
</a>
|
|
94
|
+
</li>
|
|
95
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
96
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
97
|
+
<span class="fd-icon-tab-bar__tag">Approvals (42)</span>
|
|
98
|
+
</a>
|
|
99
|
+
</li>
|
|
100
|
+
</ul>
|
|
101
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">
|
|
102
|
+
Section 1
|
|
103
|
+
</section>
|
|
104
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>
|
|
105
|
+
Section 2
|
|
106
|
+
</section>
|
|
107
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>
|
|
108
|
+
Section 3
|
|
109
|
+
</section>
|
|
110
|
+
</div>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Modifiers
|
|
114
|
+
|
|
115
|
+
| Class | Description |
|
|
116
|
+
|-------|-------------|
|
|
117
|
+
| `fd-icon-tab-bar--counters` | The text-only variant is one of the most common types |
|
|
118
|
+
| `fd-icon-tab-bar--filter` | The tab bar as a filter has two parts: <br>- An “all” tab on the left - shows the total number of items, and describes the type of item (for example, 189 Products).<br>- Tabs for specific filters - the tab text indicates the filter attribute |
|
|
119
|
+
| `fd-icon-tab-bar--icon` | <code>NOTE: This is no longer recommended.</code> Counters can be shown on top of labels |
|
|
120
|
+
| `fd-icon-tab-bar--icon-only` | The Icon tabs are rounded tabs that can be populated with any icon |
|
|
121
|
+
| `fd-icon-tab-bar--lg` | Style variant |
|
|
122
|
+
| `fd-icon-tab-bar--md` | Style variant |
|
|
123
|
+
| `fd-icon-tab-bar--navigation` | The Navigation Tab Bar is the main/default navigation displayed on the SAP launchpad home page |
|
|
124
|
+
| `fd-icon-tab-bar--navigation-flat` | Style variant |
|
|
125
|
+
| `fd-icon-tab-bar--process` | You can also use the tab bar to depict a process |
|
|
126
|
+
| `fd-icon-tab-bar--responsive-paddings` | For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class. |
|
|
127
|
+
| `fd-icon-tab-bar--sm` | The text-only variant is one of the most common types |
|
|
128
|
+
| `fd-icon-tab-bar--xl` | Style variant |
|
|
129
|
+
| `fd-icon-tab-bar--xxl` | Style variant |
|
|
130
|
+
|
|
131
|
+
## States
|
|
132
|
+
|
|
133
|
+
| Class | Description |
|
|
134
|
+
|-------|-------------|
|
|
135
|
+
| `is-active` | Active state |
|
|
136
|
+
| `is-focus` | Focus state |
|
|
137
|
+
| `is-hover` | Hover state |
|
|
138
|
+
|
|
139
|
+
## BEM Elements
|
|
140
|
+
|
|
141
|
+
This component uses the following BEM elements:
|
|
142
|
+
|
|
143
|
+
- `fd-icon-tab-bar__arrow`
|
|
144
|
+
- `fd-icon-tab-bar__badge`
|
|
145
|
+
- `fd-icon-tab-bar__button`
|
|
146
|
+
- `fd-icon-tab-bar__button-container`
|
|
147
|
+
- `fd-icon-tab-bar__container`
|
|
148
|
+
- `fd-icon-tab-bar__container--filter`
|
|
149
|
+
- `fd-icon-tab-bar__counter`
|
|
150
|
+
- `fd-icon-tab-bar__details`
|
|
151
|
+
- `fd-icon-tab-bar__filter-counter`
|
|
152
|
+
- `fd-icon-tab-bar__filter-label`
|
|
153
|
+
- `fd-icon-tab-bar__header`
|
|
154
|
+
- `fd-icon-tab-bar__header--left-offset`
|
|
155
|
+
- `fd-icon-tab-bar__icon`
|
|
156
|
+
- `fd-icon-tab-bar__icon-separator`
|
|
157
|
+
- `fd-icon-tab-bar__item`
|
|
158
|
+
- `fd-icon-tab-bar__item--closable`
|
|
159
|
+
- `fd-icon-tab-bar__item--critical`
|
|
160
|
+
- `fd-icon-tab-bar__item--dnd-hovered`
|
|
161
|
+
- `fd-icon-tab-bar__item--dnd-preview`
|
|
162
|
+
- `fd-icon-tab-bar__item--dnd-separator`
|
|
163
|
+
- `fd-icon-tab-bar__item--dnd-separator-end`
|
|
164
|
+
- `fd-icon-tab-bar__item--informative`
|
|
165
|
+
- `fd-icon-tab-bar__item--multi-click`
|
|
166
|
+
- `fd-icon-tab-bar__item--negative`
|
|
167
|
+
- `fd-icon-tab-bar__item--overflow`
|
|
168
|
+
- `fd-icon-tab-bar__item--positive`
|
|
169
|
+
- `fd-icon-tab-bar__item--single-click`
|
|
170
|
+
- `fd-icon-tab-bar__item--with-separator`
|
|
171
|
+
- `fd-icon-tab-bar__label`
|
|
172
|
+
- `fd-icon-tab-bar__line-separator`
|
|
173
|
+
- `fd-icon-tab-bar__list`
|
|
174
|
+
- `fd-icon-tab-bar__list-item`
|
|
175
|
+
- `fd-icon-tab-bar__list-item--closable`
|
|
176
|
+
- `fd-icon-tab-bar__list-item--informative`
|
|
177
|
+
- `fd-icon-tab-bar__list-item--positive`
|
|
178
|
+
- `fd-icon-tab-bar__list-item-counter`
|
|
179
|
+
- `fd-icon-tab-bar__list-item-icon`
|
|
180
|
+
- `fd-icon-tab-bar__list-item-icon-container`
|
|
181
|
+
- `fd-icon-tab-bar__list-item-title`
|
|
182
|
+
- `fd-icon-tab-bar__list-link`
|
|
183
|
+
- `fd-icon-tab-bar__overflow`
|
|
184
|
+
- `fd-icon-tab-bar__overflow-text`
|
|
185
|
+
- `fd-icon-tab-bar__panel`
|
|
186
|
+
- `fd-icon-tab-bar__popover`
|
|
187
|
+
- `fd-icon-tab-bar__popover-body`
|
|
188
|
+
- `fd-icon-tab-bar__separator`
|
|
189
|
+
- `fd-icon-tab-bar__tab`
|
|
190
|
+
- `fd-icon-tab-bar__tab-container`
|
|
191
|
+
- `fd-icon-tab-bar__tag`
|
|
192
|
+
|
|
193
|
+
## Related Components
|
|
194
|
+
|
|
195
|
+
This component works with or depends on:
|
|
196
|
+
|
|
197
|
+
- `button`
|
|
198
|
+
- `icon`
|
|
199
|
+
- `icon-tab-bar`
|
|
200
|
+
- `list`
|
|
201
|
+
- `menu`
|
|
202
|
+
- `popover`
|
|
203
|
+
|
|
204
|
+
## Design Tokens
|
|
205
|
+
|
|
206
|
+
Key CSS variables used by this component:
|
|
207
|
+
|
|
208
|
+
- `--animated`
|
|
209
|
+
- `--closable`
|
|
210
|
+
- `--counters`
|
|
211
|
+
- `--dnd-hovered`
|
|
212
|
+
- `--dnd-preview`
|
|
213
|
+
- `--dnd-separator`
|
|
214
|
+
- `--fdButtonBackgroundColor`
|
|
215
|
+
- `--fdButtonBorderColor`
|
|
216
|
+
- `--fdButtonColor`
|
|
217
|
+
- `--fdButton_Hover_Shadow`
|
|
218
|
+
- `--fdIconTabBar_Arrow_Color`
|
|
219
|
+
- `--fdIconTabBar_Badge_Background`
|
|
220
|
+
- `--fdIconTabBar_Badge_Background_After`
|
|
221
|
+
- `--fdIconTabBar_Button_Shell_Background_Color_Active`
|
|
222
|
+
- `--fdIconTabBar_Button_Shell_Background_Color_Hover`
|
|
223
|
+
|
|
224
|
+
*...and 5 more*
|
|
225
|
+
|
|
226
|
+
## Examples
|
|
227
|
+
|
|
228
|
+
### Text Only (Inline mode)
|
|
229
|
+
|
|
230
|
+
The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page. The labels of the tabs do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens. The control has the same look and feel in Cozy and Compact mode.
|
|
231
|
+
|
|
232
|
+
```html
|
|
233
|
+
<div class="fd-icon-tab-bar">
|
|
234
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
235
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
236
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
237
|
+
<span class="fd-icon-tab-bar__tag">Info</span>
|
|
238
|
+
</a>
|
|
239
|
+
</li>
|
|
240
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
241
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
242
|
+
<span class="fd-icon-tab-bar__tag">Attachments (16)</span>
|
|
243
|
+
</a>
|
|
244
|
+
</li>
|
|
245
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
246
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
247
|
+
<span class="fd-icon-tab-bar__tag">Approvals (42)</span>
|
|
248
|
+
</a>
|
|
249
|
+
</li>
|
|
250
|
+
</ul>
|
|
251
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">
|
|
252
|
+
Section 1
|
|
253
|
+
</section>
|
|
254
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>
|
|
255
|
+
Section 2
|
|
256
|
+
</section>
|
|
257
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>
|
|
258
|
+
Section 3
|
|
259
|
+
</section>
|
|
260
|
+
</div>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
### Text Only (Inline mode) Semantic Colors
|
|
264
|
+
|
|
265
|
+
```html
|
|
266
|
+
<div class="fd-icon-tab-bar">
|
|
267
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
268
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
269
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" aria-selected="true" id="tab1">
|
|
270
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
271
|
+
</a>
|
|
272
|
+
</li>
|
|
273
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
274
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
275
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
276
|
+
</a>
|
|
277
|
+
</li>
|
|
278
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
279
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" aria-selected="true" id="tab3">
|
|
280
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
281
|
+
</a>
|
|
282
|
+
</li>
|
|
283
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative">
|
|
284
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4" aria-selected="true" id="tab4">
|
|
285
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
286
|
+
</a>
|
|
287
|
+
</li>
|
|
288
|
+
</ul>
|
|
289
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">Section 1</section>
|
|
290
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>Section 2</section>
|
|
291
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>Section 3</section>
|
|
292
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section4" aria-labelledby="tab4" hidden>Section 4</section>
|
|
293
|
+
</div>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Counters and Text
|
|
297
|
+
|
|
298
|
+
<code>NOTE: This is no longer recommended.</code> Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.
|
|
299
|
+
|
|
300
|
+
```html
|
|
301
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--counters">
|
|
302
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
303
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
304
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
305
|
+
<span class="fd-icon-tab-bar__tag">Info</span>
|
|
306
|
+
</a>
|
|
307
|
+
</li>
|
|
308
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
309
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
310
|
+
<span class="fd-icon-tab-bar__counter">16</span>
|
|
311
|
+
<span class="fd-icon-tab-bar__tag">Attachments</span>
|
|
312
|
+
</a>
|
|
313
|
+
</li>
|
|
314
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
315
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
316
|
+
<span class="fd-icon-tab-bar__counter">42</span>
|
|
317
|
+
<span class="fd-icon-tab-bar__tag">Approvals</span>
|
|
318
|
+
</a>
|
|
319
|
+
</li>
|
|
320
|
+
</ul>
|
|
321
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">
|
|
322
|
+
Section 1
|
|
323
|
+
</section>
|
|
324
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>
|
|
325
|
+
Section 2
|
|
326
|
+
</section>
|
|
327
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>
|
|
328
|
+
Section 3
|
|
329
|
+
</section>
|
|
330
|
+
</div>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
### IconOnly
|
|
334
|
+
|
|
335
|
+
The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional. You need to apply the `fd-icon-tab-bar--icon-only` modifier class for this type of tabs.
|
|
336
|
+
|
|
337
|
+
```html
|
|
338
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only">
|
|
339
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
340
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
341
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
342
|
+
<div class="fd-icon-tab-bar__container">
|
|
343
|
+
<span class="fd-icon-tab-bar__icon">
|
|
344
|
+
<i class="sap-icon--account" role="presentation"></i>
|
|
345
|
+
</span>
|
|
346
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
347
|
+
</div>
|
|
348
|
+
</a>
|
|
349
|
+
</li>
|
|
350
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
351
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
352
|
+
<div class="fd-icon-tab-bar__container">
|
|
353
|
+
<span class="fd-icon-tab-bar__icon">
|
|
354
|
+
<i class="sap-icon--product" role="presentation"></i>
|
|
355
|
+
</span>
|
|
356
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
357
|
+
</div>
|
|
358
|
+
</a>
|
|
359
|
+
</li>
|
|
360
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
361
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
362
|
+
<div class="fd-icon-tab-bar__container">
|
|
363
|
+
<span class="fd-icon-tab-bar__icon">
|
|
364
|
+
<i class="sap-icon--present" role="presentation"></i>
|
|
365
|
+
</span>
|
|
366
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
367
|
+
</div>
|
|
368
|
+
</a>
|
|
369
|
+
</li>
|
|
370
|
+
</ul>
|
|
371
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">
|
|
372
|
+
Section 1
|
|
373
|
+
</section>
|
|
374
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>
|
|
375
|
+
Section 2
|
|
376
|
+
</section>
|
|
377
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>
|
|
378
|
+
Section 3
|
|
379
|
+
</section>
|
|
380
|
+
</div>
|
|
381
|
+
```
|
|
382
|
+
|
|
383
|
+
### Icon Only Semantic Colors
|
|
384
|
+
|
|
385
|
+
```html
|
|
386
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only">
|
|
387
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
388
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
389
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1">
|
|
390
|
+
<div class="fd-icon-tab-bar__container">
|
|
391
|
+
<span class="fd-icon-tab-bar__icon">
|
|
392
|
+
<i class="sap-icon--history" role="presentation"></i>
|
|
393
|
+
</span>
|
|
394
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
395
|
+
</div>
|
|
396
|
+
</a>
|
|
397
|
+
</li>
|
|
398
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
399
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab2">
|
|
400
|
+
<div class="fd-icon-tab-bar__container">
|
|
401
|
+
<span class="fd-icon-tab-bar__icon">
|
|
402
|
+
<i class="sap-icon--card" role="presentation"></i>
|
|
403
|
+
</span>
|
|
404
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
405
|
+
</div>
|
|
406
|
+
</a>
|
|
407
|
+
</li>
|
|
408
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
409
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
410
|
+
<div class="fd-icon-tab-bar__container">
|
|
411
|
+
<span class="fd-icon-tab-bar__icon">
|
|
412
|
+
<i class="sap-icon--cart" role="presentation"></i>
|
|
413
|
+
</span>
|
|
414
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
415
|
+
</div>
|
|
416
|
+
</a>
|
|
417
|
+
</li>
|
|
418
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative">
|
|
419
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4">
|
|
420
|
+
<div class="fd-icon-tab-bar__container">
|
|
421
|
+
<span class="fd-icon-tab-bar__icon">
|
|
422
|
+
<i class="sap-icon--cart" role="presentation"></i>
|
|
423
|
+
</span>
|
|
424
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
425
|
+
</div>
|
|
426
|
+
</a>
|
|
427
|
+
</li>
|
|
428
|
+
</ul>
|
|
429
|
+
</div>
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
### Icon
|
|
433
|
+
|
|
434
|
+
To display Icon Tabs with labels and counters you need to apply the `fd-icon-tab-bar--icon` modifier class. The counters are optional and can be ommited. The label is always positioned at the bottom. If you decide to use labels, use them for all tabs. The badge is rendered at the top right hand corner of the icon container. Consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.
|
|
435
|
+
|
|
436
|
+
```html
|
|
437
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon">
|
|
438
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
439
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
440
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="1">
|
|
441
|
+
<div class="fd-icon-tab-bar__container">
|
|
442
|
+
<span class="fd-icon-tab-bar__icon">
|
|
443
|
+
<i class="sap-icon--filter" role="presentation"></i>
|
|
444
|
+
</span>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="fd-icon-tab-bar__details">
|
|
447
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
448
|
+
</div>
|
|
449
|
+
</a>
|
|
450
|
+
</li>
|
|
451
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
452
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab2">
|
|
453
|
+
<div class="fd-icon-tab-bar__container">
|
|
454
|
+
<span class="fd-icon-tab-bar__icon">
|
|
455
|
+
<i class="sap-icon--customer" role="presentation"></i>
|
|
456
|
+
</span>
|
|
457
|
+
</div>
|
|
458
|
+
<div class="fd-icon-tab-bar__details">
|
|
459
|
+
<span class="fd-icon-tab-bar__counter">99</span>
|
|
460
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
461
|
+
</div>
|
|
462
|
+
</a>
|
|
463
|
+
</li>
|
|
464
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
465
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
466
|
+
<div class="fd-icon-tab-bar__container">
|
|
467
|
+
<span class="fd-icon-tab-bar__icon">
|
|
468
|
+
<i class="sap-icon--chain-link" role="presentation"></i>
|
|
469
|
+
</span>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="fd-icon-tab-bar__details">
|
|
472
|
+
<span class="fd-icon-tab-bar__counter">56 of 123</span>
|
|
473
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
474
|
+
</div>
|
|
475
|
+
</a>
|
|
476
|
+
</li>
|
|
477
|
+
</ul>
|
|
478
|
+
</div>
|
|
479
|
+
|
|
480
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon">
|
|
481
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
482
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
483
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7">
|
|
484
|
+
<div class="fd-icon-tab-bar__container">
|
|
485
|
+
<span class="fd-icon-tab-bar__icon">
|
|
486
|
+
<i class="sap-icon--play" role="presentation"></i>
|
|
487
|
+
</span>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="fd-icon-tab-bar__details">
|
|
490
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
491
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
492
|
+
</div>
|
|
493
|
+
</a>
|
|
494
|
+
</li>
|
|
495
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
496
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab8">
|
|
497
|
+
<div class="fd-icon-tab-bar__container">
|
|
498
|
+
<span class="fd-icon-tab-bar__icon">
|
|
499
|
+
<i class="sap-icon--unfavorite" role="presentation"></i>
|
|
500
|
+
</span>
|
|
501
|
+
</div>
|
|
502
|
+
<div class="fd-icon-tab-bar__details">
|
|
503
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
504
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
505
|
+
</div>
|
|
506
|
+
</a>
|
|
507
|
+
</li>
|
|
508
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
509
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
510
|
+
<div class="fd-icon-tab-bar__container">
|
|
511
|
+
<span class="fd-icon-tab-bar__icon">
|
|
512
|
+
<i class="sap-icon--shipping-status" role="presentation"></i>
|
|
513
|
+
</span>
|
|
514
|
+
</div>
|
|
515
|
+
<div class="fd-icon-tab-bar__details">
|
|
516
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
517
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
518
|
+
</div>
|
|
519
|
+
</a>
|
|
520
|
+
</li>
|
|
521
|
+
</ul>
|
|
522
|
+
</div>
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
### Process
|
|
526
|
+
|
|
527
|
+
You can also use the tab bar to depict a process. In this case, each tab stands for one step. You need to add the `fd-icon-tab-bar--process` modifier class and a sibling html element with `fd-icon-tab-bar__separator` class to the tab.
|
|
528
|
+
|
|
529
|
+
```html
|
|
530
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--process">
|
|
531
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
532
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
533
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab1">
|
|
534
|
+
<div class="fd-icon-tab-bar__container">
|
|
535
|
+
<span class="fd-icon-tab-bar__icon">
|
|
536
|
+
<i class="sap-icon--person-placeholder" role="presentation"></i>
|
|
537
|
+
</span>
|
|
538
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
539
|
+
</div>
|
|
540
|
+
<div class="fd-icon-tab-bar__details">
|
|
541
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
542
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
543
|
+
</div>
|
|
544
|
+
</a>
|
|
545
|
+
<span class="fd-icon-tab-bar__separator">
|
|
546
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
547
|
+
</span>
|
|
548
|
+
</li>
|
|
549
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
550
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab2">
|
|
551
|
+
<div class="fd-icon-tab-bar__container">
|
|
552
|
+
<span class="fd-icon-tab-bar__icon">
|
|
553
|
+
<i class="sap-icon--paper-plane" role="presentation"></i>
|
|
554
|
+
</span>
|
|
555
|
+
</div>
|
|
556
|
+
<div class="fd-icon-tab-bar__details">
|
|
557
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
558
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
559
|
+
</div>
|
|
560
|
+
</a>
|
|
561
|
+
<span class="fd-icon-tab-bar__separator">
|
|
562
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
563
|
+
</span>
|
|
564
|
+
</li>
|
|
565
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
566
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
567
|
+
<div class="fd-icon-tab-bar__container">
|
|
568
|
+
<span class="fd-icon-tab-bar__icon">
|
|
569
|
+
<i class="sap-icon--loan" role="presentation"></i>
|
|
570
|
+
</span>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="fd-icon-tab-bar__details">
|
|
573
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
574
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
575
|
+
</div>
|
|
576
|
+
</a>
|
|
577
|
+
</li>
|
|
578
|
+
</ul>
|
|
579
|
+
</div>
|
|
580
|
+
|
|
581
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--process">
|
|
582
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
583
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
584
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7">
|
|
585
|
+
<div class="fd-icon-tab-bar__container">
|
|
586
|
+
<span class="fd-icon-tab-bar__icon">
|
|
587
|
+
<i class="sap-icon--nutrition-activity" role="presentation"></i>
|
|
588
|
+
</span>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="fd-icon-tab-bar__details">
|
|
591
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
592
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
593
|
+
</div>
|
|
594
|
+
</a>
|
|
595
|
+
<span class="fd-icon-tab-bar__separator">
|
|
596
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
597
|
+
</span>
|
|
598
|
+
</li>
|
|
599
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
600
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab8">
|
|
601
|
+
<div class="fd-icon-tab-bar__container">
|
|
602
|
+
<span class="fd-icon-tab-bar__icon">
|
|
603
|
+
<i class="sap-icon--vehicle-repair" role="presentation"></i>
|
|
604
|
+
</span>
|
|
605
|
+
</div>
|
|
606
|
+
<div class="fd-icon-tab-bar__details">
|
|
607
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
608
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
609
|
+
</div>
|
|
610
|
+
</a>
|
|
611
|
+
<span class="fd-icon-tab-bar__separator">
|
|
612
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
613
|
+
</span>
|
|
614
|
+
</li>
|
|
615
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
616
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
617
|
+
<div class="fd-icon-tab-bar__container">
|
|
618
|
+
<span class="fd-icon-tab-bar__icon">
|
|
619
|
+
<i class="sap-icon--palette" role="presentation"></i>
|
|
620
|
+
</span>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="fd-icon-tab-bar__details">
|
|
623
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
624
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
625
|
+
</div>
|
|
626
|
+
</a>
|
|
627
|
+
</li>
|
|
628
|
+
</ul>
|
|
629
|
+
</div>
|
|
630
|
+
|
|
631
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--process">
|
|
632
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
633
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
634
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab10">
|
|
635
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
636
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
637
|
+
</a>
|
|
638
|
+
<span class="fd-icon-tab-bar__separator">
|
|
639
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
640
|
+
</span>
|
|
641
|
+
</li>
|
|
642
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
643
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab11">
|
|
644
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
645
|
+
</a>
|
|
646
|
+
<span class="fd-icon-tab-bar__separator">
|
|
647
|
+
<i class="sap-icon--process" role="presentation"></i>
|
|
648
|
+
</span>
|
|
649
|
+
</li>
|
|
650
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
651
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab12">
|
|
652
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
653
|
+
</a>
|
|
654
|
+
</li>
|
|
655
|
+
</ul>
|
|
656
|
+
</div>
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
### Filter
|
|
660
|
+
|
|
661
|
+
The tab bar as a filter has two parts: <br>- An “all” tab on the left - shows the total number of items, and describes the type of item (for example, 189 Products).<br>- Tabs for specific filters - the tab text indicates the filter attribute. It is recommended to show a counter on every tab.<br>You need to add the \
|
|
662
|
+
|
|
663
|
+
```html
|
|
664
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--filter">
|
|
665
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
666
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
667
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#" id="tab1">
|
|
668
|
+
<div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter">
|
|
669
|
+
<span class="fd-icon-tab-bar__filter-counter">ÇN</span>
|
|
670
|
+
<span class="fd-icon-tab-bar__filter-label">ProductsN</span>
|
|
671
|
+
</div>
|
|
672
|
+
</a>
|
|
673
|
+
</li>
|
|
674
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
675
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab2">
|
|
676
|
+
<div class="fd-icon-tab-bar__container">
|
|
677
|
+
<span class="fd-icon-tab-bar__icon">
|
|
678
|
+
<i class="sap-icon--letter" role="presentation"></i>
|
|
679
|
+
</span>
|
|
680
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
681
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
682
|
+
</div>
|
|
683
|
+
<div class="fd-icon-tab-bar__label">Ok</div>
|
|
684
|
+
|
|
685
|
+
</a>
|
|
686
|
+
</li>
|
|
687
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
688
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
689
|
+
<div class="fd-icon-tab-bar__container">
|
|
690
|
+
<span class="fd-icon-tab-bar__icon">
|
|
691
|
+
<i class="sap-icon--activate" role="presentation"></i>
|
|
692
|
+
</span>
|
|
693
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="fd-icon-tab-bar__label">Heavy</div>
|
|
696
|
+
</a>
|
|
697
|
+
</li>
|
|
698
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
699
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4">
|
|
700
|
+
<div class="fd-icon-tab-bar__container">
|
|
701
|
+
<span class="fd-icon-tab-bar__icon">
|
|
702
|
+
<i class="sap-icon--jam" role="presentation"></i>
|
|
703
|
+
</span>
|
|
704
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
705
|
+
</div>
|
|
706
|
+
<div class="fd-icon-tab-bar__label">Overweight</div>
|
|
707
|
+
</a>
|
|
708
|
+
</li>
|
|
709
|
+
</ul>
|
|
710
|
+
</div>
|
|
711
|
+
|
|
712
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--filter">
|
|
713
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
714
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
715
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
716
|
+
<div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter">
|
|
717
|
+
<span class="fd-icon-tab-bar__filter-counter">ÇN</span>
|
|
718
|
+
<span class="fd-icon-tab-bar__filter-label">ProductsN</span>
|
|
719
|
+
</div>
|
|
720
|
+
</a>
|
|
721
|
+
</li>
|
|
722
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
723
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab10">
|
|
724
|
+
<div class="fd-icon-tab-bar__container">
|
|
725
|
+
<span class="fd-icon-tab-bar__icon">
|
|
726
|
+
<i class="sap-icon--text-color" role="presentation"></i>
|
|
727
|
+
</span>
|
|
728
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
729
|
+
</div>
|
|
730
|
+
<div class="fd-icon-tab-bar__label">Ok</div>
|
|
731
|
+
</a>
|
|
732
|
+
</li>
|
|
733
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
734
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab11">
|
|
735
|
+
<div class="fd-icon-tab-bar__container">
|
|
736
|
+
<span class="fd-icon-tab-bar__icon">
|
|
737
|
+
<i class="sap-icon--touch" role="presentation"></i>
|
|
738
|
+
</span>
|
|
739
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
740
|
+
</div>
|
|
741
|
+
<div class="fd-icon-tab-bar__label">Heavy</div>
|
|
742
|
+
</a>
|
|
743
|
+
</li>
|
|
744
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
745
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab12">
|
|
746
|
+
<div class="fd-icon-tab-bar__container">
|
|
747
|
+
<span class="fd-icon-tab-bar__icon">
|
|
748
|
+
<i class="sap-icon--feedback" role="presentation"></i>
|
|
749
|
+
</span>
|
|
750
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
751
|
+
</div>
|
|
752
|
+
<div class="fd-icon-tab-bar__label">Overweight</div>
|
|
753
|
+
</a>
|
|
754
|
+
</li>
|
|
755
|
+
</ul>
|
|
756
|
+
</div>
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
### Overflow
|
|
760
|
+
|
|
761
|
+
Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). For processes with a fixed order, an overflow to both sides is used. For tabs that can be rearranged, only one overflow will be displayed on the right side.
|
|
762
|
+
|
|
763
|
+
```html
|
|
764
|
+
<h3>Regular</h3>
|
|
765
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
766
|
+
<span class="fd-icon-tab-bar__overflow-text">+2</span>
|
|
767
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
768
|
+
</button>
|
|
769
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
770
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
771
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
772
|
+
</button>
|
|
773
|
+
|
|
774
|
+
<button class="fd-icon-tab-bar__overflow is-hover">
|
|
775
|
+
<span class="fd-icon-tab-bar__overflow-text">+2</span>
|
|
776
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
777
|
+
</button>
|
|
778
|
+
<button class="fd-icon-tab-bar__overflow is-hover">
|
|
779
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
780
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
781
|
+
</button>
|
|
782
|
+
|
|
783
|
+
<button class="fd-icon-tab-bar__overflow is-active">
|
|
784
|
+
<span class="fd-icon-tab-bar__overflow-text">+2</span>
|
|
785
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
786
|
+
</button>
|
|
787
|
+
<button class="fd-icon-tab-bar__overflow is-active">
|
|
788
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
789
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
790
|
+
</button>
|
|
791
|
+
|
|
792
|
+
<button class="fd-icon-tab-bar__overflow is-focus">
|
|
793
|
+
<span class="fd-icon-tab-bar__overflow-text">+2</span>
|
|
794
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
795
|
+
</button>
|
|
796
|
+
<button class="fd-icon-tab-bar__overflow is-focus">
|
|
797
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
798
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
799
|
+
</button>
|
|
800
|
+
|
|
801
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--process">
|
|
802
|
+
<ul role="tablist" class="fd-icon-tab-bar__header fd-icon-tab-bar__header--left-offset">
|
|
803
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
|
|
804
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
805
|
+
<span class="fd-icon-tab-bar__overflow-text">+2</span>
|
|
806
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
807
|
+
</button>
|
|
808
|
+
</li>
|
|
809
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
810
|
+
<span class="sap-icon--process"></span>
|
|
811
|
+
</li>
|
|
812
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
813
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1">
|
|
814
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
815
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
816
|
+
</a>
|
|
817
|
+
</li>
|
|
818
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
819
|
+
<span class="sap-icon--process"></span>
|
|
820
|
+
</li>
|
|
821
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
822
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab2">
|
|
823
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
824
|
+
</a>
|
|
825
|
+
</li>
|
|
826
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
827
|
+
<span class="sap-icon--process"></span>
|
|
828
|
+
</li>
|
|
829
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
830
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
831
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
832
|
+
</a>
|
|
833
|
+
</li>
|
|
834
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
835
|
+
<span class="sap-icon--process"></span>
|
|
836
|
+
</li>
|
|
837
|
+
<li
|
|
838
|
+
role="presentation"
|
|
839
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow"
|
|
840
|
+
|
|
841
|
+
>
|
|
842
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
843
|
+
<span class="fd-icon-tab-bar__overflow-text">+3</span>
|
|
844
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
845
|
+
</button>
|
|
846
|
+
</li>
|
|
847
|
+
</ul>
|
|
848
|
+
</div>
|
|
849
|
+
<div class="fd-icon-tab-bar">
|
|
850
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
851
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
852
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4">
|
|
853
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
854
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
855
|
+
</a>
|
|
856
|
+
</li>
|
|
857
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
858
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab5">
|
|
859
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
860
|
+
</a>
|
|
861
|
+
</li>
|
|
862
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
863
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab6">
|
|
864
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
865
|
+
</a>
|
|
866
|
+
</li>
|
|
867
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
|
|
868
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
869
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
870
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
871
|
+
</button>
|
|
872
|
+
</li>
|
|
873
|
+
</ul>
|
|
874
|
+
</div>
|
|
875
|
+
```
|
|
876
|
+
|
|
877
|
+
### Universal Icon Tab Bar Single Click Area
|
|
878
|
+
|
|
879
|
+
When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select.<br>You need to apply the \
|
|
880
|
+
|
|
881
|
+
```html
|
|
882
|
+
<div class='fddocs-icon-tab-container'>
|
|
883
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--xl">
|
|
884
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
885
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
886
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab111">
|
|
887
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
888
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
889
|
+
</a>
|
|
890
|
+
</li>
|
|
891
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
892
|
+
<div class="fd-popover">
|
|
893
|
+
<div class="fd-popover__control">
|
|
894
|
+
<a role="tab" class="fd-icon-tab-bar__tab" tabindex="0" aria-selected="true" id="tab222" aria-controls="popoverA1" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('popoverA1');">
|
|
895
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
896
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
897
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
898
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
899
|
+
</span>
|
|
900
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
901
|
+
</div>
|
|
902
|
+
</a>
|
|
903
|
+
</div>
|
|
904
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverA1">
|
|
905
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
906
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
907
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
908
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
909
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
910
|
+
</a>
|
|
911
|
+
</li>
|
|
912
|
+
<li tabindex="-1" role="listitem" aria-level="2" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
913
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
914
|
+
<span class="fd-list__title">Subsection 1.1</span>
|
|
915
|
+
</a>
|
|
916
|
+
</li>
|
|
917
|
+
<li tabindex="-1" role="listitem" aria-level="3" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
918
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
919
|
+
<span class="fd-list__title">Subsection 1.1.1</span>
|
|
920
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
921
|
+
</a>
|
|
922
|
+
</li>
|
|
923
|
+
<li tabindex="-1" role="listitem" aria-level="4" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
924
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
925
|
+
<span class="fd-list__title">Subsection 1.1.1.1</span>
|
|
926
|
+
</a>
|
|
927
|
+
</li>
|
|
928
|
+
<li tabindex="-1" role="listitem" aria-level="5" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
929
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
930
|
+
<span class="fd-list__title">Subsection 1.1.1.1.1</span>
|
|
931
|
+
</a>
|
|
932
|
+
</li>
|
|
933
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
934
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
935
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
936
|
+
</a>
|
|
937
|
+
</li>
|
|
938
|
+
</ul>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
941
|
+
</li>
|
|
942
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
943
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab333a">
|
|
944
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
945
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
946
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
947
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
948
|
+
</span>
|
|
949
|
+
</div>
|
|
950
|
+
</a>
|
|
951
|
+
</li>
|
|
952
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
953
|
+
<a role="tab" class="fd-icon-tab-bar__tab is-hover" href="#" id="tab333b">
|
|
954
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
955
|
+
<span class="fd-icon-tab-bar__tag">Section 4 (hover)</span>
|
|
956
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
957
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
958
|
+
</span>
|
|
959
|
+
</div>
|
|
960
|
+
</a>
|
|
961
|
+
</li>
|
|
962
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
963
|
+
<a role="tab" class="fd-icon-tab-bar__tab is-focus" href="#" id="tab333c">
|
|
964
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
965
|
+
<span class="fd-icon-tab-bar__tag">Section 5 (focus)</span>
|
|
966
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
967
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
968
|
+
</span>
|
|
969
|
+
</div>
|
|
970
|
+
</a>
|
|
971
|
+
</li>
|
|
972
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
973
|
+
<div class="fd-popover">
|
|
974
|
+
<div class="fd-popover__control">
|
|
975
|
+
<a role="tab" class="fd-icon-tab-bar__tab" tabindex="0" aria-selected="true" id="tab222sef" aria-controls="popoverA1d" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('popoverA1d');">
|
|
976
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
977
|
+
<span class="fd-icon-tab-bar__tag">Section 6</span>
|
|
978
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
979
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
980
|
+
</span>
|
|
981
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
982
|
+
</div>
|
|
983
|
+
</a>
|
|
984
|
+
</div>
|
|
985
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverA1d">
|
|
986
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
987
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
988
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
989
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
990
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
991
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
992
|
+
</a>
|
|
993
|
+
</li>
|
|
994
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
995
|
+
<li tabindex="-1" role="listitem" aria-level="2" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
996
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
997
|
+
<span class="fd-list__title">Subsection 1.1</span>
|
|
998
|
+
</a>
|
|
999
|
+
</li>
|
|
1000
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
1001
|
+
<li tabindex="-1" role="listitem" aria-level="3" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1002
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1003
|
+
<span class="fd-list__title">Subsection 1.1.1</span>
|
|
1004
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1005
|
+
</a>
|
|
1006
|
+
</li>
|
|
1007
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
1008
|
+
<li tabindex="-1" role="listitem" aria-level="4" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1009
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1010
|
+
<span class="fd-list__title">Subsection 1.1.1.1</span>
|
|
1011
|
+
</a>
|
|
1012
|
+
</li>
|
|
1013
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
1014
|
+
<li tabindex="-1" role="listitem" aria-level="5" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1015
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1016
|
+
<span class="fd-list__title">Subsection 1.1.1.1.1</span>
|
|
1017
|
+
</a>
|
|
1018
|
+
</li>
|
|
1019
|
+
<li class="fd-icon-tab-bar__line-separator" role="presentation" tabindex="-1"></li>
|
|
1020
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1021
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1022
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
1023
|
+
</a>
|
|
1024
|
+
</li>
|
|
1025
|
+
</ul>
|
|
1026
|
+
</div>
|
|
1027
|
+
</div>
|
|
1028
|
+
</li>
|
|
1029
|
+
</ul>
|
|
1030
|
+
</div>
|
|
1031
|
+
|
|
1032
|
+
<div class='fd-icon-tab-bar fd-icon-tab-bar--icon'>
|
|
1033
|
+
<ul role='tablist' class='fd-icon-tab-bar__header'>
|
|
1034
|
+
<li role='presentation' class='fd-icon-tab-bar__item'>
|
|
1035
|
+
<a role='tab' class='fd-icon-tab-bar__tab' href='#' aria-selected='true' id='tab1'>
|
|
1036
|
+
<div class='fd-icon-tab-bar__container'>
|
|
1037
|
+
<span class='fd-icon-tab-bar__icon'>
|
|
1038
|
+
<i class='sap-icon--filter' role='presentation'></i>
|
|
1039
|
+
</span>
|
|
1040
|
+
</div>
|
|
1041
|
+
<div class='fd-icon-tab-bar__details'>
|
|
1042
|
+
<span class='fd-icon-tab-bar__label'>Description</span>
|
|
1043
|
+
</div>
|
|
1044
|
+
</a>
|
|
1045
|
+
</li>
|
|
1046
|
+
<li role='presentation' class='fd-icon-tab-bar__item'>
|
|
1047
|
+
<a role='tab' class='fd-icon-tab-bar__tab' href='#' id='tab2'>
|
|
1048
|
+
<div class='fd-icon-tab-bar__container'>
|
|
1049
|
+
<span class='fd-icon-tab-bar__icon'>
|
|
1050
|
+
<i class='sap-icon--customer' role='presentation'></i>
|
|
1051
|
+
</span>
|
|
1052
|
+
</div>
|
|
1053
|
+
<div class='fd-icon-tab-bar__details'>
|
|
1054
|
+
<span class='fd-icon-tab-bar__counter'>99</span>
|
|
1055
|
+
<span class='fd-icon-tab-bar__label'>Description</span>
|
|
1056
|
+
</div>
|
|
1057
|
+
</a>
|
|
1058
|
+
</li>
|
|
1059
|
+
<li role='presentation' class='fd-icon-tab-bar__item'>
|
|
1060
|
+
<a role='tab' class='fd-icon-tab-bar__tab' href='#' id='tab3'>
|
|
1061
|
+
<div class='fd-icon-tab-bar__container'>
|
|
1062
|
+
<span class='fd-icon-tab-bar__icon'>
|
|
1063
|
+
<i class='sap-icon--chain-link' role='presentation'></i>
|
|
1064
|
+
</span>
|
|
1065
|
+
</div>
|
|
1066
|
+
<div class='fd-icon-tab-bar__details'>
|
|
1067
|
+
<span class='fd-icon-tab-bar__counter'>56 of 123</span>
|
|
1068
|
+
<span class='fd-icon-tab-bar__label'>Description</span>
|
|
1069
|
+
</div>
|
|
1070
|
+
</a>
|
|
1071
|
+
</li>
|
|
1072
|
+
<li role='presentation' class='fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow'>
|
|
1073
|
+
<div class="fd-popover">
|
|
1074
|
+
<div class="fd-popover__control">
|
|
1075
|
+
<button class='fd-icon-tab-bar__overflow is-active'>
|
|
1076
|
+
<span class='fd-icon-tab-bar__overflow-text'>More</span>
|
|
1077
|
+
<i class='sap-icon--slim-arrow-down' role='presentation'></i>
|
|
1078
|
+
</button>
|
|
1079
|
+
</div>
|
|
1080
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" style='top: 2.3rem'>
|
|
1081
|
+
<ul role="list" class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list">
|
|
1082
|
+
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--informative">
|
|
1083
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1084
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
1085
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
1086
|
+
<i class="sap-icon--letter" role="presentation"></i>
|
|
1087
|
+
</span>
|
|
1088
|
+
</span>
|
|
1089
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
1090
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(12)</span>
|
|
1091
|
+
</a>
|
|
1092
|
+
</li>
|
|
1093
|
+
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1094
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1095
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
1096
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
1097
|
+
<i class="sap-icon--activate" role="presentation"></i>
|
|
1098
|
+
</span>
|
|
1099
|
+
</span>
|
|
1100
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
1101
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(227)</span>
|
|
1102
|
+
</a>
|
|
1103
|
+
</li>
|
|
1104
|
+
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--positive">
|
|
1105
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1106
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
1107
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
1108
|
+
<i class="sap-icon--jam" role="presentation"></i>
|
|
1109
|
+
</span>
|
|
1110
|
+
</span>
|
|
1111
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
1112
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(0)</span>
|
|
1113
|
+
</a>
|
|
1114
|
+
</li>
|
|
1115
|
+
</ul>
|
|
1116
|
+
</div>
|
|
1117
|
+
|
|
1118
|
+
</div>
|
|
1119
|
+
</li>
|
|
1120
|
+
</ul>
|
|
1121
|
+
</div>
|
|
1122
|
+
</div>
|
|
1123
|
+
```
|
|
1124
|
+
|
|
1125
|
+
### Universal Icon Tab Bar Multi Click Area
|
|
1126
|
+
|
|
1127
|
+
In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected.
|
|
1128
|
+
|
|
1129
|
+
```html
|
|
1130
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--md">
|
|
1131
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1132
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1133
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="multiClick1">
|
|
1134
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1135
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1136
|
+
</a>
|
|
1137
|
+
</li>
|
|
1138
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1139
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab2" tabindex="0">
|
|
1140
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1141
|
+
</a>
|
|
1142
|
+
|
|
1143
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1144
|
+
<div class="fd-popover__control">
|
|
1145
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1146
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popoverA3" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverA3');" aria-label="open menu button">
|
|
1147
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1148
|
+
</button>
|
|
1149
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1150
|
+
</div>
|
|
1151
|
+
</div>
|
|
1152
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverA3">
|
|
1153
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
1154
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1155
|
+
<span class="sap-icon--process"></span>
|
|
1156
|
+
</li>
|
|
1157
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1158
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1159
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
1160
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1161
|
+
</a>
|
|
1162
|
+
</li>
|
|
1163
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1164
|
+
<span class="sap-icon--process"></span>
|
|
1165
|
+
</li>
|
|
1166
|
+
<li tabindex="-1" role="listitem" aria-level="2" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1167
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link is-focus">
|
|
1168
|
+
<span class="fd-list__title">Subsection 1.1 (focus)</span>
|
|
1169
|
+
</a>
|
|
1170
|
+
</li>
|
|
1171
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1172
|
+
<span class="sap-icon--process"></span>
|
|
1173
|
+
</li>
|
|
1174
|
+
<li tabindex="-1" role="listitem" aria-level="3" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1175
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link is-hover">
|
|
1176
|
+
<span class="fd-list__title">Subsection 1.1.1 (hover)</span>
|
|
1177
|
+
</a>
|
|
1178
|
+
</li>
|
|
1179
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1180
|
+
<span class="sap-icon--process"></span>
|
|
1181
|
+
</li>
|
|
1182
|
+
<li tabindex="-1" role="listitem" aria-level="4" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1183
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1184
|
+
<span class="fd-list__title">Subsection 1.1.1.1</span>
|
|
1185
|
+
</a>
|
|
1186
|
+
</li>
|
|
1187
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1188
|
+
<span class="sap-icon--process"></span>
|
|
1189
|
+
</li>
|
|
1190
|
+
<li tabindex="-1" role="listitem" aria-level="5" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1191
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1192
|
+
<span class="fd-list__title">Subsection 1.1.1.1.1</span>
|
|
1193
|
+
</a>
|
|
1194
|
+
</li>
|
|
1195
|
+
<li tabindex="-1" class="fd-icon-tab-bar__icon-separator" role="presentation">
|
|
1196
|
+
<span class="sap-icon--process"></span>
|
|
1197
|
+
</li>
|
|
1198
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1199
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1200
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
1201
|
+
</a>
|
|
1202
|
+
</li>
|
|
1203
|
+
</ul>
|
|
1204
|
+
</div>
|
|
1205
|
+
</div>
|
|
1206
|
+
</li>
|
|
1207
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1208
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
1209
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1210
|
+
</a>
|
|
1211
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1212
|
+
<div class="fd-popover__control">
|
|
1213
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1214
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
1215
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1216
|
+
</button>
|
|
1217
|
+
</div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
</li>
|
|
1221
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1222
|
+
<a role="tab" class="fd-icon-tab-bar__tab is-hover" href="#" id="tab4">
|
|
1223
|
+
<span class="fd-icon-tab-bar__tag">Section 4 (hover)</span>
|
|
1224
|
+
</a>
|
|
1225
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1226
|
+
<div class="fd-popover__control">
|
|
1227
|
+
|
|
1228
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1229
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
1230
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1231
|
+
</button>
|
|
1232
|
+
</div>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
</li>
|
|
1236
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1237
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4b">
|
|
1238
|
+
<span class="fd-icon-tab-bar__tag">Section 5 (btn hover)</span>
|
|
1239
|
+
</a>
|
|
1240
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1241
|
+
<div class="fd-popover__control">
|
|
1242
|
+
|
|
1243
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1244
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button is-hover">
|
|
1245
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1246
|
+
</button>
|
|
1247
|
+
</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
</div>
|
|
1250
|
+
</li>
|
|
1251
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1252
|
+
<a role="tab" class="fd-icon-tab-bar__tab is-focus" href="#" id="tab5">
|
|
1253
|
+
<span class="fd-icon-tab-bar__tag">Section 6 (focus)</span>
|
|
1254
|
+
</a>
|
|
1255
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1256
|
+
<div class="fd-popover__control">
|
|
1257
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1258
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button is-focus">
|
|
1259
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1260
|
+
</button>
|
|
1261
|
+
</div>
|
|
1262
|
+
</div>
|
|
1263
|
+
</div>
|
|
1264
|
+
</li>
|
|
1265
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1266
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#" id="tab5b">
|
|
1267
|
+
<span class="fd-icon-tab-bar__tag">Section 7 (selected, btn hover)</span>
|
|
1268
|
+
</a>
|
|
1269
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1270
|
+
<div class="fd-popover__control">
|
|
1271
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1272
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button is-hover">
|
|
1273
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1274
|
+
</button>
|
|
1275
|
+
</div>
|
|
1276
|
+
</div>
|
|
1277
|
+
</div>
|
|
1278
|
+
</li>
|
|
1279
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1280
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#" id="tab5c">
|
|
1281
|
+
<span class="fd-icon-tab-bar__tag">Section 8 (selected)</span>
|
|
1282
|
+
</a>
|
|
1283
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1284
|
+
<div class="fd-popover__control">
|
|
1285
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1286
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
1287
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1288
|
+
</button>
|
|
1289
|
+
</div>
|
|
1290
|
+
</div>
|
|
1291
|
+
</div>
|
|
1292
|
+
</li>
|
|
1293
|
+
</ul>
|
|
1294
|
+
</div>
|
|
1295
|
+
```
|
|
1296
|
+
|
|
1297
|
+
### Badges
|
|
1298
|
+
|
|
1299
|
+
The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. <br>The badge is a span element with \
|
|
1300
|
+
|
|
1301
|
+
```html
|
|
1302
|
+
<div class="fd-icon-tab-bar">
|
|
1303
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1304
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1305
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section11" id="tab1">
|
|
1306
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1307
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1308
|
+
</a>
|
|
1309
|
+
</li>
|
|
1310
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1311
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section12" aria-selected="true" id="tab2">
|
|
1312
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1313
|
+
</a>
|
|
1314
|
+
</li>
|
|
1315
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1316
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section13" id="tab3">
|
|
1317
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1318
|
+
</a>
|
|
1319
|
+
</li>
|
|
1320
|
+
</ul>
|
|
1321
|
+
</div>
|
|
1322
|
+
|
|
1323
|
+
<div class="fd-icon-tab-bar">
|
|
1324
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1325
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
1326
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section21" aria-selected="true" id="tab4">
|
|
1327
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1328
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1329
|
+
</a>
|
|
1330
|
+
</li>
|
|
1331
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
1332
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section22" aria-selected="true" id="tab5">
|
|
1333
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1334
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1335
|
+
</a>
|
|
1336
|
+
</li>
|
|
1337
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
1338
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section23" aria-selected="true" id="tab6">
|
|
1339
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1340
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1341
|
+
</a>
|
|
1342
|
+
</li>
|
|
1343
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative">
|
|
1344
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section24" aria-selected="true" id="tab7">
|
|
1345
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1346
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1347
|
+
</a>
|
|
1348
|
+
</li>
|
|
1349
|
+
</ul>
|
|
1350
|
+
</div>
|
|
1351
|
+
|
|
1352
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--counters">
|
|
1353
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1354
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
1355
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section41" id="tab8">
|
|
1356
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1357
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1358
|
+
</a>
|
|
1359
|
+
</li>
|
|
1360
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
1361
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section42" aria-selected="true" id="tab9">
|
|
1362
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
1363
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1364
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1365
|
+
</a>
|
|
1366
|
+
</li>
|
|
1367
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
1368
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section43" id="tab10">
|
|
1369
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
1370
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1371
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1372
|
+
</a>
|
|
1373
|
+
</li>
|
|
1374
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative">
|
|
1375
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section44" id="tab11">
|
|
1376
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
1377
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1378
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1379
|
+
</a>
|
|
1380
|
+
</li>
|
|
1381
|
+
</ul>
|
|
1382
|
+
</div>
|
|
1383
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only">
|
|
1384
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1385
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive">
|
|
1386
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab12">
|
|
1387
|
+
<div class="fd-icon-tab-bar__container">
|
|
1388
|
+
<span class="fd-icon-tab-bar__icon">
|
|
1389
|
+
<i class="sap-icon--history" role="presentation"></i>
|
|
1390
|
+
</span>
|
|
1391
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1392
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
1393
|
+
</div>
|
|
1394
|
+
</a>
|
|
1395
|
+
</li>
|
|
1396
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative">
|
|
1397
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab13">
|
|
1398
|
+
<div class="fd-icon-tab-bar__container">
|
|
1399
|
+
<span class="fd-icon-tab-bar__icon">
|
|
1400
|
+
<i class="sap-icon--card" role="presentation"></i>
|
|
1401
|
+
</span>
|
|
1402
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1403
|
+
<span class="fd-icon-tab-bar__counter">23</span>
|
|
1404
|
+
</div>
|
|
1405
|
+
</a>
|
|
1406
|
+
</li>
|
|
1407
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical">
|
|
1408
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab14">
|
|
1409
|
+
<div class="fd-icon-tab-bar__container">
|
|
1410
|
+
<span class="fd-icon-tab-bar__icon">
|
|
1411
|
+
<i class="sap-icon--cart" role="presentation"></i>
|
|
1412
|
+
</span>
|
|
1413
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1414
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
1415
|
+
</div>
|
|
1416
|
+
</a>
|
|
1417
|
+
</li>
|
|
1418
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative">
|
|
1419
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab15">
|
|
1420
|
+
<div class="fd-icon-tab-bar__container">
|
|
1421
|
+
<span class="fd-icon-tab-bar__icon">
|
|
1422
|
+
<i class="sap-icon--cart" role="presentation"></i>
|
|
1423
|
+
</span>
|
|
1424
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1425
|
+
<span class="fd-icon-tab-bar__counter">10</span>
|
|
1426
|
+
</div>
|
|
1427
|
+
</a>
|
|
1428
|
+
</li>
|
|
1429
|
+
</ul>
|
|
1430
|
+
</div>
|
|
1431
|
+
```
|
|
1432
|
+
|
|
1433
|
+
### Responsive Paddings
|
|
1434
|
+
|
|
1435
|
+
For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.
|
|
1436
|
+
|
|
1437
|
+
```html
|
|
1438
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--responsive-paddings">
|
|
1439
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1440
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1441
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section11" id="tab1">
|
|
1442
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1443
|
+
<span class="fd-icon-tab-bar__badge"></span>
|
|
1444
|
+
</a>
|
|
1445
|
+
</li>
|
|
1446
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1447
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section12" aria-selected="true" id="tab2">
|
|
1448
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1449
|
+
</a>
|
|
1450
|
+
</li>
|
|
1451
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1452
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section13" id="tab3">
|
|
1453
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1454
|
+
</a>
|
|
1455
|
+
</li>
|
|
1456
|
+
</ul>
|
|
1457
|
+
</div>
|
|
1458
|
+
```
|
|
1459
|
+
|
|
1460
|
+
### Responsive Paddings
|
|
1461
|
+
|
|
1462
|
+
For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.
|
|
1463
|
+
|
|
1464
|
+
```html
|
|
1465
|
+
<h4>SM (1rem) paddings</h4>
|
|
1466
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--sm">
|
|
1467
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1468
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1469
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1">
|
|
1470
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1471
|
+
</a>
|
|
1472
|
+
</li>
|
|
1473
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1474
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab2">
|
|
1475
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1476
|
+
</a>
|
|
1477
|
+
</li>
|
|
1478
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1479
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
1480
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1481
|
+
</a>
|
|
1482
|
+
</li>
|
|
1483
|
+
</ul>
|
|
1484
|
+
</div>
|
|
1485
|
+
<h4>MD (2rem) paddings</h4>
|
|
1486
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--md">
|
|
1487
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1488
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1489
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4">
|
|
1490
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1491
|
+
</a>
|
|
1492
|
+
</li>
|
|
1493
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1494
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab5">
|
|
1495
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1496
|
+
</a>
|
|
1497
|
+
</li>
|
|
1498
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1499
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab6">
|
|
1500
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1501
|
+
</a>
|
|
1502
|
+
</li>
|
|
1503
|
+
</ul>
|
|
1504
|
+
</div>
|
|
1505
|
+
<h4>LG (2rem) paddings</h4>
|
|
1506
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--lg">
|
|
1507
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1508
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1509
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab7">
|
|
1510
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1511
|
+
</a>
|
|
1512
|
+
</li>
|
|
1513
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1514
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab8">
|
|
1515
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1516
|
+
</a>
|
|
1517
|
+
</li>
|
|
1518
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1519
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
1520
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1521
|
+
</a>
|
|
1522
|
+
</li>
|
|
1523
|
+
</ul>
|
|
1524
|
+
</div>
|
|
1525
|
+
<h4>XL (3rem) paddings</h4>
|
|
1526
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--xl">
|
|
1527
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1528
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1529
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab13">
|
|
1530
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1531
|
+
</a>
|
|
1532
|
+
</li>
|
|
1533
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1534
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab14">
|
|
1535
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1536
|
+
</a>
|
|
1537
|
+
</li>
|
|
1538
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1539
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab15">
|
|
1540
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1541
|
+
</a>
|
|
1542
|
+
</li>
|
|
1543
|
+
</ul>
|
|
1544
|
+
</div>
|
|
1545
|
+
<h4>XXL (3rem) paddings</h4>
|
|
1546
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--xxl">
|
|
1547
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1548
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1549
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab16">
|
|
1550
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1551
|
+
</a>
|
|
1552
|
+
</li>
|
|
1553
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1554
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab17">
|
|
1555
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1556
|
+
</a>
|
|
1557
|
+
</li>
|
|
1558
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1559
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab18">
|
|
1560
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1561
|
+
</a>
|
|
1562
|
+
</li>
|
|
1563
|
+
</ul>
|
|
1564
|
+
</div>
|
|
1565
|
+
```
|
|
1566
|
+
|
|
1567
|
+
### Navigation Icon Tab Bar (Shell Navigation)
|
|
1568
|
+
|
|
1569
|
+
The Navigation Tab Bar is the main/default navigation displayed on the SAP launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view. <br>The implementation is based on UniversalIconTabBar with some different color parameters that are specific to Shell Bar. <br>If there are more Tabs than the screen can accommodate, the remaining Tabs move into an Overflow.
|
|
1570
|
+
|
|
1571
|
+
```html
|
|
1572
|
+
<h4>With Overflow</h4>
|
|
1573
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-icon-tab-bar--navigation">
|
|
1574
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1575
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1576
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1">
|
|
1577
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1578
|
+
</a>
|
|
1579
|
+
</li>
|
|
1580
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1581
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab2">
|
|
1582
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1583
|
+
</a>
|
|
1584
|
+
</li>
|
|
1585
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1586
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3">
|
|
1587
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1588
|
+
</a>
|
|
1589
|
+
</li>
|
|
1590
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
|
|
1591
|
+
<button class="fd-icon-tab-bar__overflow">
|
|
1592
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
1593
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
1594
|
+
</button>
|
|
1595
|
+
</li>
|
|
1596
|
+
</ul>
|
|
1597
|
+
</div>
|
|
1598
|
+
|
|
1599
|
+
<h4>With Multi Click Area</h4>
|
|
1600
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--md">
|
|
1601
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1602
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1603
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tabA1">
|
|
1604
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1605
|
+
</a>
|
|
1606
|
+
</li>
|
|
1607
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1608
|
+
<a role="tab" class="fd-icon-tab-bar__tab" id="tabA2" tabindex="0">
|
|
1609
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1610
|
+
</a>
|
|
1611
|
+
|
|
1612
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1613
|
+
<div class="fd-popover__control">
|
|
1614
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1615
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popoverAO4" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverAO4');" aria-label="open menu button">
|
|
1616
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1617
|
+
</button>
|
|
1618
|
+
</div>
|
|
1619
|
+
</div>
|
|
1620
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverAO4">
|
|
1621
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
1622
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1623
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1624
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
1625
|
+
</a>
|
|
1626
|
+
</li>
|
|
1627
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1628
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1629
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
1630
|
+
</a>
|
|
1631
|
+
</li>
|
|
1632
|
+
</ul>
|
|
1633
|
+
</div>
|
|
1634
|
+
</div>
|
|
1635
|
+
</li>
|
|
1636
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1637
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tabA3">
|
|
1638
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1639
|
+
</a>
|
|
1640
|
+
</li>
|
|
1641
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1642
|
+
<a role="tab" class="fd-icon-tab-bar__tab" id="tabA4" tabindex="0">
|
|
1643
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1644
|
+
</a>
|
|
1645
|
+
|
|
1646
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1647
|
+
<div class="fd-popover__control">
|
|
1648
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1649
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popoverAaC" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverAaC');" aria-label="open menu button">
|
|
1650
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1651
|
+
</button>
|
|
1652
|
+
</div>
|
|
1653
|
+
</div>
|
|
1654
|
+
</div>
|
|
1655
|
+
</li>
|
|
1656
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1657
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tabA5">
|
|
1658
|
+
<span class="fd-icon-tab-bar__tag">Section 5</span>
|
|
1659
|
+
</a>
|
|
1660
|
+
</li>
|
|
1661
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1662
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tabA6" tabindex="0">
|
|
1663
|
+
<span class="fd-icon-tab-bar__tag">Section 6</span>
|
|
1664
|
+
</a>
|
|
1665
|
+
|
|
1666
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1667
|
+
<div class="fd-popover__control">
|
|
1668
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1669
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popoverAa1" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverAa1');" aria-label="open menu button">
|
|
1670
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1671
|
+
</button>
|
|
1672
|
+
</div>
|
|
1673
|
+
</div>
|
|
1674
|
+
</div>
|
|
1675
|
+
</li>
|
|
1676
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1677
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab6">
|
|
1678
|
+
<span class="fd-icon-tab-bar__tag">Section 7</span>
|
|
1679
|
+
</a>
|
|
1680
|
+
</li>
|
|
1681
|
+
</ul>
|
|
1682
|
+
</div>
|
|
1683
|
+
|
|
1684
|
+
<h4>With Single Click Area</h4>
|
|
1685
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--xl">
|
|
1686
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1687
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1688
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab7">
|
|
1689
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1690
|
+
</a>
|
|
1691
|
+
</li>
|
|
1692
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
1693
|
+
<div class="fd-popover">
|
|
1694
|
+
<div class="fd-popover__control">
|
|
1695
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab8" tabindex="0" aria-controls="popoverAO5" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('popoverAO5');">
|
|
1696
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
1697
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1698
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
1699
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
1700
|
+
</span>
|
|
1701
|
+
</div>
|
|
1702
|
+
</a>
|
|
1703
|
+
</div>
|
|
1704
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverAO5">
|
|
1705
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
1706
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1707
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1708
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
1709
|
+
</a>
|
|
1710
|
+
</li>
|
|
1711
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1712
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1713
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
1714
|
+
</a>
|
|
1715
|
+
</li>
|
|
1716
|
+
</ul>
|
|
1717
|
+
</div>
|
|
1718
|
+
</div>
|
|
1719
|
+
</li>
|
|
1720
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1721
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
1722
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1723
|
+
</a>
|
|
1724
|
+
</li>
|
|
1725
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click">
|
|
1726
|
+
<div class="fd-popover">
|
|
1727
|
+
<div class="fd-popover__control">
|
|
1728
|
+
<a role="tab" class="fd-icon-tab-bar__tab" id="tab10" tabindex="0" aria-expanded="true" aria-haspopup="true">
|
|
1729
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
1730
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1731
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
1732
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
1733
|
+
</span>
|
|
1734
|
+
</div>
|
|
1735
|
+
</a>
|
|
1736
|
+
</div>
|
|
1737
|
+
</div>
|
|
1738
|
+
</li>
|
|
1739
|
+
</ul>
|
|
1740
|
+
</div>
|
|
1741
|
+
```
|
|
1742
|
+
|
|
1743
|
+
### Flat Navigation
|
|
1744
|
+
|
|
1745
|
+
The Flat Navigation offers the user an easy access to multiple pages per space. As the ShellNavigation (Fiori 3), the Flat Navigation is the main/default navigation displayed on the SAP Fiori launchpad home page. It snaps to top and remains visible while scrolling and is not visible in App view. <br>The Flat Navigation Concept allows putting all entities of a single space directly into the first level of the Top Level Navigation Bar for direct access. <br>Add the \
|
|
1746
|
+
|
|
1747
|
+
```html
|
|
1748
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--navigation-flat fd-icon-tab-bar--md">
|
|
1749
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1750
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1751
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab11">
|
|
1752
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1753
|
+
</a>
|
|
1754
|
+
</li>
|
|
1755
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click fd-icon-tab-bar__item--with-separator">
|
|
1756
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab12" tabindex="0">
|
|
1757
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1758
|
+
</a>
|
|
1759
|
+
|
|
1760
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1761
|
+
<div class="fd-popover__control">
|
|
1762
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1763
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="open menu button">
|
|
1764
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1765
|
+
</button>
|
|
1766
|
+
</div>
|
|
1767
|
+
</div>
|
|
1768
|
+
</div>
|
|
1769
|
+
</li>
|
|
1770
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--with-separator">
|
|
1771
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab13">
|
|
1772
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1773
|
+
</a>
|
|
1774
|
+
</li>
|
|
1775
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1776
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab14">
|
|
1777
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1778
|
+
</a>
|
|
1779
|
+
</li>
|
|
1780
|
+
</ul>
|
|
1781
|
+
</div>
|
|
1782
|
+
```
|
|
1783
|
+
|
|
1784
|
+
### Tabs drag and drop
|
|
1785
|
+
|
|
1786
|
+
You can allow users to rearrange the tab order. If this feature is enabled, users can drag and drop tabs to reorder them, either directly on the tab bar or inside the overflow menu. It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa. <br>There're 4 classes for drag and drop:
|
|
1787
|
+
<br>use \
|
|
1788
|
+
|
|
1789
|
+
```html
|
|
1790
|
+
<div class="fd-icon-tab-bar">
|
|
1791
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1792
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator-end">
|
|
1793
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-1" id="tab1-1">
|
|
1794
|
+
<span class="fd-icon-tab-bar__tag">Insert After Item</span>
|
|
1795
|
+
</a>
|
|
1796
|
+
</li>
|
|
1797
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1798
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-2" aria-selected="true" id="tab1-2">
|
|
1799
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1800
|
+
</a>
|
|
1801
|
+
</li>
|
|
1802
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1803
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-3" id="tab1-3">
|
|
1804
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1805
|
+
</a>
|
|
1806
|
+
</li>
|
|
1807
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator">
|
|
1808
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-4" id="tab1-4">
|
|
1809
|
+
<span class="fd-icon-tab-bar__tag">Insert Before Item</span>
|
|
1810
|
+
</a>
|
|
1811
|
+
</li>
|
|
1812
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1813
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-5" id="tab1-5">
|
|
1814
|
+
<span class="fd-icon-tab-bar__tag">Section 5</span>
|
|
1815
|
+
</a>
|
|
1816
|
+
</li>
|
|
1817
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-preview">
|
|
1818
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1-6" id="tab1-6">
|
|
1819
|
+
<span class="fd-icon-tab-bar__tag">Being dragged preview</span>
|
|
1820
|
+
</a>
|
|
1821
|
+
</li>
|
|
1822
|
+
</ul>
|
|
1823
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-1" aria-labelledby="tab1">
|
|
1824
|
+
Section 1
|
|
1825
|
+
</section>
|
|
1826
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-2" aria-labelledby="tab2" hidden>
|
|
1827
|
+
Section 2
|
|
1828
|
+
</section>
|
|
1829
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-3" aria-labelledby="tab3" hidden>
|
|
1830
|
+
Section 3
|
|
1831
|
+
</section>
|
|
1832
|
+
</div>
|
|
1833
|
+
|
|
1834
|
+
<div class="fd-icon-tab-bar">
|
|
1835
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1836
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1837
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2-1" id="tab2-1">
|
|
1838
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1839
|
+
</a>
|
|
1840
|
+
</li>
|
|
1841
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1842
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2-2" aria-selected="true" id="tab2-2">
|
|
1843
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1844
|
+
</a>
|
|
1845
|
+
</li>
|
|
1846
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-hovered">
|
|
1847
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2-3" id="tab2-3">
|
|
1848
|
+
<span class="fd-icon-tab-bar__tag">Insert Into Item</span>
|
|
1849
|
+
</a>
|
|
1850
|
+
</li>
|
|
1851
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1852
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2-4" id="tab2-4">
|
|
1853
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1854
|
+
</a>
|
|
1855
|
+
</li>
|
|
1856
|
+
</ul>
|
|
1857
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-1" aria-labelledby="tab1">
|
|
1858
|
+
Section 1
|
|
1859
|
+
</section>
|
|
1860
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-2" aria-labelledby="tab2" hidden>
|
|
1861
|
+
Section 2
|
|
1862
|
+
</section>
|
|
1863
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-3" aria-labelledby="tab3" hidden>
|
|
1864
|
+
Section 3
|
|
1865
|
+
</section>
|
|
1866
|
+
</div>
|
|
1867
|
+
|
|
1868
|
+
<div class="fd-icon-tab-bar">
|
|
1869
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1870
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1871
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3-1" id="tab3-1">
|
|
1872
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1873
|
+
</a>
|
|
1874
|
+
</li>
|
|
1875
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1876
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3-2" aria-selected="true" id="tab3-2">
|
|
1877
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1878
|
+
</a>
|
|
1879
|
+
</li>
|
|
1880
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1881
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3-3">
|
|
1882
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1883
|
+
</a>
|
|
1884
|
+
</li>
|
|
1885
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1886
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab3-4" tabindex="0">
|
|
1887
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1888
|
+
</a>
|
|
1889
|
+
|
|
1890
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1891
|
+
<div class="fd-popover__control">
|
|
1892
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1893
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popover3" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popover3');" aria-label="open menu button">
|
|
1894
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1895
|
+
</button>
|
|
1896
|
+
</div>
|
|
1897
|
+
</div>
|
|
1898
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popover3">
|
|
1899
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
1900
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1901
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1902
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
1903
|
+
</a>
|
|
1904
|
+
</li>
|
|
1905
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__item--dnd-separator">
|
|
1906
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1907
|
+
<span class="fd-list__title">Insert Before Subsection</span>
|
|
1908
|
+
</a>
|
|
1909
|
+
</li>
|
|
1910
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1911
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1912
|
+
<span class="fd-list__title">Subsection 3</span>
|
|
1913
|
+
</a>
|
|
1914
|
+
</li>
|
|
1915
|
+
</ul>
|
|
1916
|
+
</div>
|
|
1917
|
+
</div>
|
|
1918
|
+
</li>
|
|
1919
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1920
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3-5">
|
|
1921
|
+
<span class="fd-icon-tab-bar__tag">Section 5</span>
|
|
1922
|
+
</a>
|
|
1923
|
+
</li>
|
|
1924
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1925
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3-4" id="tab3-6">
|
|
1926
|
+
<span class="fd-icon-tab-bar__tag">Section 6</span>
|
|
1927
|
+
</a>
|
|
1928
|
+
</li>
|
|
1929
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1930
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab3-7" tabindex="0">
|
|
1931
|
+
<span class="fd-icon-tab-bar__tag">Section 7</span>
|
|
1932
|
+
</a>
|
|
1933
|
+
|
|
1934
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1935
|
+
<div class="fd-popover__control">
|
|
1936
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
1937
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popover4" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverAO4');" aria-label="open menu button">
|
|
1938
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
1939
|
+
</button>
|
|
1940
|
+
</div>
|
|
1941
|
+
</div>
|
|
1942
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popover4">
|
|
1943
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
1944
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1945
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1946
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
1947
|
+
</a>
|
|
1948
|
+
</li>
|
|
1949
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__item--dnd-separator-end">
|
|
1950
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1951
|
+
<span class="fd-list__title">Insert After Subsection</span>
|
|
1952
|
+
</a>
|
|
1953
|
+
</li>
|
|
1954
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
1955
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
1956
|
+
<span class="fd-list__title">Subsection 3</span>
|
|
1957
|
+
</a>
|
|
1958
|
+
</li>
|
|
1959
|
+
</ul>
|
|
1960
|
+
</div>
|
|
1961
|
+
</div>
|
|
1962
|
+
</li>
|
|
1963
|
+
</ul>
|
|
1964
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-1" aria-labelledby="tab1">
|
|
1965
|
+
Section 1
|
|
1966
|
+
</section>
|
|
1967
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-2" aria-labelledby="tab2" hidden>
|
|
1968
|
+
Section 2
|
|
1969
|
+
</section>
|
|
1970
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-3" aria-labelledby="tab3" hidden>
|
|
1971
|
+
Section 3
|
|
1972
|
+
</section>
|
|
1973
|
+
</div>
|
|
1974
|
+
|
|
1975
|
+
<div class="fd-icon-tab-bar">
|
|
1976
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
1977
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1978
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4-1" id="tab4-1">
|
|
1979
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
1980
|
+
</a>
|
|
1981
|
+
</li>
|
|
1982
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1983
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4-2" aria-selected="true" id="tab4-2">
|
|
1984
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
1985
|
+
</a>
|
|
1986
|
+
</li>
|
|
1987
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
1988
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4-3">
|
|
1989
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
1990
|
+
</a>
|
|
1991
|
+
</li>
|
|
1992
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click">
|
|
1993
|
+
<a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" id="tab4-4" tabindex="0">
|
|
1994
|
+
<span class="fd-icon-tab-bar__tag">Section 4</span>
|
|
1995
|
+
</a>
|
|
1996
|
+
|
|
1997
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
1998
|
+
<div class="fd-popover__control">
|
|
1999
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2000
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-controls="popoverAO4" aria-expanded="false" aria-haspopup="true" onclick="onPopoverClick('popoverAO4');" aria-label="open menu button">
|
|
2001
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
2002
|
+
</button>
|
|
2003
|
+
</div>
|
|
2004
|
+
</div>
|
|
2005
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false" id="popoverAO4">
|
|
2006
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
2007
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
2008
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2009
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
2010
|
+
</a>
|
|
2011
|
+
</li>
|
|
2012
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__item--dnd-hovered">
|
|
2013
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2014
|
+
<span class="fd-list__title">Insert Into Subsection</span>
|
|
2015
|
+
</a>
|
|
2016
|
+
</li>
|
|
2017
|
+
<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item">
|
|
2018
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2019
|
+
<span class="fd-list__title">Subsection 3</span>
|
|
2020
|
+
</a>
|
|
2021
|
+
</li>
|
|
2022
|
+
</ul>
|
|
2023
|
+
</div>
|
|
2024
|
+
</div>
|
|
2025
|
+
</li>
|
|
2026
|
+
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
2027
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4-4" id="tab4-5">
|
|
2028
|
+
<span class="fd-icon-tab-bar__tag">Section 5</span>
|
|
2029
|
+
</a>
|
|
2030
|
+
</li>
|
|
2031
|
+
</ul>
|
|
2032
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1">
|
|
2033
|
+
Section 1
|
|
2034
|
+
</section>
|
|
2035
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden>
|
|
2036
|
+
Section 2
|
|
2037
|
+
</section>
|
|
2038
|
+
<section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden>
|
|
2039
|
+
Section 3
|
|
2040
|
+
</section>
|
|
2041
|
+
</div>
|
|
2042
|
+
```
|
|
2043
|
+
|
|
2044
|
+
### Closable Tabs
|
|
2045
|
+
|
|
2046
|
+
For closable tabs add the \
|
|
2047
|
+
|
|
2048
|
+
```html
|
|
2049
|
+
<h4>Text Only</h4>
|
|
2050
|
+
<div class="fd-icon-tab-bar">
|
|
2051
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2052
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2053
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
2054
|
+
<span class="fd-icon-tab-bar__tag">Info</span>
|
|
2055
|
+
</a>
|
|
2056
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2057
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2058
|
+
<i class="sap-icon--decline"></i>
|
|
2059
|
+
</button>
|
|
2060
|
+
</div>
|
|
2061
|
+
</li>
|
|
2062
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2063
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
2064
|
+
<span class="fd-icon-tab-bar__tag">Attachments (16)</span>
|
|
2065
|
+
</a>
|
|
2066
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2067
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2068
|
+
<i class="sap-icon--decline"></i>
|
|
2069
|
+
</button>
|
|
2070
|
+
</div>
|
|
2071
|
+
</li>
|
|
2072
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2073
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
2074
|
+
<span class="fd-icon-tab-bar__tag">Approvals (42)</span>
|
|
2075
|
+
</a>
|
|
2076
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2077
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2078
|
+
<i class="sap-icon--decline"></i>
|
|
2079
|
+
</button>
|
|
2080
|
+
</div>
|
|
2081
|
+
</li>
|
|
2082
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2083
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4" id="tab4">
|
|
2084
|
+
<span class="fd-icon-tab-bar__tag">Tab (btn hover)</span>
|
|
2085
|
+
</a>
|
|
2086
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2087
|
+
<button
|
|
2088
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button is-hover"
|
|
2089
|
+
aria-label="close tab"
|
|
2090
|
+
>
|
|
2091
|
+
<i class="sap-icon--decline"></i>
|
|
2092
|
+
</button>
|
|
2093
|
+
</div>
|
|
2094
|
+
</li>
|
|
2095
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2096
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section4" id="tab5">
|
|
2097
|
+
<span class="fd-icon-tab-bar__tag">Tab (btn down with focus)</span>
|
|
2098
|
+
</a>
|
|
2099
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2100
|
+
<button
|
|
2101
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button is-focus is-active"
|
|
2102
|
+
aria-label="close tab"
|
|
2103
|
+
>
|
|
2104
|
+
<i class="sap-icon--decline"></i>
|
|
2105
|
+
</button>
|
|
2106
|
+
</div>
|
|
2107
|
+
</li>
|
|
2108
|
+
</ul>
|
|
2109
|
+
</div>
|
|
2110
|
+
|
|
2111
|
+
<h4>Icon</h4>
|
|
2112
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon">
|
|
2113
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2114
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2115
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="1">
|
|
2116
|
+
<div class="fd-icon-tab-bar__container">
|
|
2117
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2118
|
+
<i class="sap-icon--filter" role="presentation"></i>
|
|
2119
|
+
</span>
|
|
2120
|
+
</div>
|
|
2121
|
+
<div class="fd-icon-tab-bar__details">
|
|
2122
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2123
|
+
</div>
|
|
2124
|
+
</a>
|
|
2125
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2126
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2127
|
+
<i class="sap-icon--decline"></i>
|
|
2128
|
+
</button>
|
|
2129
|
+
</div>
|
|
2130
|
+
</li>
|
|
2131
|
+
<li
|
|
2132
|
+
role="presentation"
|
|
2133
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive fd-icon-tab-bar__item--closable"
|
|
2134
|
+
>
|
|
2135
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7">
|
|
2136
|
+
<div class="fd-icon-tab-bar__container">
|
|
2137
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2138
|
+
<i class="sap-icon--play" role="presentation"></i>
|
|
2139
|
+
</span>
|
|
2140
|
+
</div>
|
|
2141
|
+
<div class="fd-icon-tab-bar__details">
|
|
2142
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2143
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2144
|
+
</div>
|
|
2145
|
+
</a>
|
|
2146
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2147
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2148
|
+
<i class="sap-icon--decline"></i>
|
|
2149
|
+
</button>
|
|
2150
|
+
</div>
|
|
2151
|
+
</li>
|
|
2152
|
+
<li
|
|
2153
|
+
role="presentation"
|
|
2154
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative fd-icon-tab-bar__item--closable"
|
|
2155
|
+
>
|
|
2156
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab8">
|
|
2157
|
+
<div class="fd-icon-tab-bar__container">
|
|
2158
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2159
|
+
<i class="sap-icon--unfavorite" role="presentation"></i>
|
|
2160
|
+
</span>
|
|
2161
|
+
</div>
|
|
2162
|
+
<div class="fd-icon-tab-bar__details">
|
|
2163
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2164
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2165
|
+
</div>
|
|
2166
|
+
</a>
|
|
2167
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2168
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2169
|
+
<i class="sap-icon--decline"></i>
|
|
2170
|
+
</button>
|
|
2171
|
+
</div>
|
|
2172
|
+
</li>
|
|
2173
|
+
<li
|
|
2174
|
+
role="presentation"
|
|
2175
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical fd-icon-tab-bar__item--closable"
|
|
2176
|
+
>
|
|
2177
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
2178
|
+
<div class="fd-icon-tab-bar__container">
|
|
2179
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2180
|
+
<i class="sap-icon--shipping-status" role="presentation"></i>
|
|
2181
|
+
</span>
|
|
2182
|
+
</div>
|
|
2183
|
+
<div class="fd-icon-tab-bar__details">
|
|
2184
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2185
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2186
|
+
</div>
|
|
2187
|
+
</a>
|
|
2188
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2189
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2190
|
+
<i class="sap-icon--decline"></i>
|
|
2191
|
+
</button>
|
|
2192
|
+
</div>
|
|
2193
|
+
</li>
|
|
2194
|
+
</ul>
|
|
2195
|
+
</div>
|
|
2196
|
+
|
|
2197
|
+
<h4>Icon Only</h4>
|
|
2198
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only">
|
|
2199
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2200
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2201
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1">
|
|
2202
|
+
<div class="fd-icon-tab-bar__container">
|
|
2203
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2204
|
+
<i class="sap-icon--account" role="presentation"></i>
|
|
2205
|
+
</span>
|
|
2206
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2207
|
+
</div>
|
|
2208
|
+
</a>
|
|
2209
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2210
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2211
|
+
<i class="sap-icon--decline"></i>
|
|
2212
|
+
</button>
|
|
2213
|
+
</div>
|
|
2214
|
+
</li>
|
|
2215
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2216
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section2" aria-selected="true" id="tab2">
|
|
2217
|
+
<div class="fd-icon-tab-bar__container">
|
|
2218
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2219
|
+
<i class="sap-icon--product" role="presentation"></i>
|
|
2220
|
+
</span>
|
|
2221
|
+
</div>
|
|
2222
|
+
</a>
|
|
2223
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2224
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2225
|
+
<i class="sap-icon--decline"></i>
|
|
2226
|
+
</button>
|
|
2227
|
+
</div>
|
|
2228
|
+
</li>
|
|
2229
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2230
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3">
|
|
2231
|
+
<div class="fd-icon-tab-bar__container">
|
|
2232
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2233
|
+
<i class="sap-icon--present" role="presentation"></i>
|
|
2234
|
+
</span>
|
|
2235
|
+
</div>
|
|
2236
|
+
</a>
|
|
2237
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2238
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2239
|
+
<i class="sap-icon--decline"></i>
|
|
2240
|
+
</button>
|
|
2241
|
+
</div>
|
|
2242
|
+
</li>
|
|
2243
|
+
</ul>
|
|
2244
|
+
</div>
|
|
2245
|
+
|
|
2246
|
+
<h4>Single Click Area</h4>
|
|
2247
|
+
<div class="fd-icon-tab-bar">
|
|
2248
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2249
|
+
<li
|
|
2250
|
+
role="presentation"
|
|
2251
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click fd-icon-tab-bar__item--closable"
|
|
2252
|
+
>
|
|
2253
|
+
<div class="fd-popover">
|
|
2254
|
+
<div class="fd-popover__control">
|
|
2255
|
+
<a
|
|
2256
|
+
role="tab"
|
|
2257
|
+
class="fd-icon-tab-bar__tab"
|
|
2258
|
+
aria-selected="true"
|
|
2259
|
+
id="tab8"
|
|
2260
|
+
tabindex="0"
|
|
2261
|
+
aria-controls="popoverITB1"
|
|
2262
|
+
aria-expanded="true"
|
|
2263
|
+
aria-haspopup="true"
|
|
2264
|
+
onclick="onPopoverClick('popoverITB1');"
|
|
2265
|
+
>
|
|
2266
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
2267
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
2268
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
2269
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
2270
|
+
</span>
|
|
2271
|
+
</div>
|
|
2272
|
+
</a>
|
|
2273
|
+
</div>
|
|
2274
|
+
<div
|
|
2275
|
+
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body"
|
|
2276
|
+
aria-hidden="false"
|
|
2277
|
+
id="popoverITB1"
|
|
2278
|
+
>
|
|
2279
|
+
<ul class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list" role="list">
|
|
2280
|
+
<li
|
|
2281
|
+
tabindex="-1"
|
|
2282
|
+
role="listitem"
|
|
2283
|
+
aria-level="1"
|
|
2284
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--closable"
|
|
2285
|
+
>
|
|
2286
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2287
|
+
<span class="fd-list__title">Subsection 1</span>
|
|
2288
|
+
</a>
|
|
2289
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2290
|
+
<button
|
|
2291
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2292
|
+
aria-label="close tab"
|
|
2293
|
+
>
|
|
2294
|
+
<i class="sap-icon--decline"></i>
|
|
2295
|
+
</button>
|
|
2296
|
+
</div>
|
|
2297
|
+
</li>
|
|
2298
|
+
<li
|
|
2299
|
+
tabindex="-1"
|
|
2300
|
+
role="listitem"
|
|
2301
|
+
aria-level="2"
|
|
2302
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--closable"
|
|
2303
|
+
>
|
|
2304
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2305
|
+
<span class="fd-list__title">Subsection 1.1</span>
|
|
2306
|
+
</a>
|
|
2307
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2308
|
+
<button
|
|
2309
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2310
|
+
aria-label="close tab"
|
|
2311
|
+
>
|
|
2312
|
+
<i class="sap-icon--decline"></i>
|
|
2313
|
+
</button>
|
|
2314
|
+
</div>
|
|
2315
|
+
</li>
|
|
2316
|
+
<li
|
|
2317
|
+
tabindex="-1"
|
|
2318
|
+
role="listitem"
|
|
2319
|
+
aria-level="1"
|
|
2320
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--closable"
|
|
2321
|
+
>
|
|
2322
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2323
|
+
<span class="fd-list__title">Subsection 2</span>
|
|
2324
|
+
</a>
|
|
2325
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2326
|
+
<button
|
|
2327
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2328
|
+
aria-label="close tab"
|
|
2329
|
+
>
|
|
2330
|
+
<i class="sap-icon--decline"></i>
|
|
2331
|
+
</button>
|
|
2332
|
+
</div>
|
|
2333
|
+
</li>
|
|
2334
|
+
</ul>
|
|
2335
|
+
</div>
|
|
2336
|
+
</div>
|
|
2337
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2338
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2339
|
+
<i class="sap-icon--decline"></i>
|
|
2340
|
+
</button>
|
|
2341
|
+
</div>
|
|
2342
|
+
</li>
|
|
2343
|
+
<li
|
|
2344
|
+
role="presentation"
|
|
2345
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--single-click fd-icon-tab-bar__item--closable"
|
|
2346
|
+
>
|
|
2347
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab2single">
|
|
2348
|
+
<div class="fd-icon-tab-bar__tab-container">
|
|
2349
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
2350
|
+
<span class="fd-icon-tab-bar__arrow">
|
|
2351
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
2352
|
+
</span>
|
|
2353
|
+
</div>
|
|
2354
|
+
</a>
|
|
2355
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2356
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2357
|
+
<i class="sap-icon--decline"></i>
|
|
2358
|
+
</button>
|
|
2359
|
+
</div>
|
|
2360
|
+
</li>
|
|
2361
|
+
</ul>
|
|
2362
|
+
|
|
2363
|
+
<h4>Multi Click Area</h4>
|
|
2364
|
+
<div class="fd-icon-tab-bar">
|
|
2365
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2366
|
+
<li
|
|
2367
|
+
role="presentation"
|
|
2368
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click fd-icon-tab-bar__item--closable"
|
|
2369
|
+
>
|
|
2370
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1multi">
|
|
2371
|
+
<span class="fd-icon-tab-bar__tag">Section 1</span>
|
|
2372
|
+
</a>
|
|
2373
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
2374
|
+
<div class="fd-popover__control">
|
|
2375
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2376
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
2377
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
2378
|
+
</button>
|
|
2379
|
+
</div>
|
|
2380
|
+
</div>
|
|
2381
|
+
</div>
|
|
2382
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2383
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2384
|
+
<i class="sap-icon--decline"></i>
|
|
2385
|
+
</button>
|
|
2386
|
+
</div>
|
|
2387
|
+
</li>
|
|
2388
|
+
<li
|
|
2389
|
+
role="presentation"
|
|
2390
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click fd-icon-tab-bar__item--closable"
|
|
2391
|
+
>
|
|
2392
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3multi">
|
|
2393
|
+
<span class="fd-icon-tab-bar__tag">Section 2</span>
|
|
2394
|
+
</a>
|
|
2395
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
2396
|
+
<div class="fd-popover__control">
|
|
2397
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2398
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
2399
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
2400
|
+
</button>
|
|
2401
|
+
</div>
|
|
2402
|
+
</div>
|
|
2403
|
+
</div>
|
|
2404
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2405
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2406
|
+
<i class="sap-icon--decline"></i>
|
|
2407
|
+
</button>
|
|
2408
|
+
</div>
|
|
2409
|
+
</li>
|
|
2410
|
+
<li
|
|
2411
|
+
role="presentation"
|
|
2412
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--multi-click fd-icon-tab-bar__item--closable"
|
|
2413
|
+
>
|
|
2414
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab3multi" aria-selected="true">
|
|
2415
|
+
<span class="fd-icon-tab-bar__tag">Section 3</span>
|
|
2416
|
+
</a>
|
|
2417
|
+
<div class="fd-popover fd-icon-tab-bar__popover">
|
|
2418
|
+
<div class="fd-popover__control">
|
|
2419
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2420
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button">
|
|
2421
|
+
<i class="sap-icon--slim-arrow-down"></i>
|
|
2422
|
+
</button>
|
|
2423
|
+
</div>
|
|
2424
|
+
</div>
|
|
2425
|
+
</div>
|
|
2426
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2427
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2428
|
+
<i class="sap-icon--decline"></i>
|
|
2429
|
+
</button>
|
|
2430
|
+
</div>
|
|
2431
|
+
</li>
|
|
2432
|
+
</ul>
|
|
2433
|
+
</div>
|
|
2434
|
+
|
|
2435
|
+
<h4>Overflow</h4>
|
|
2436
|
+
|
|
2437
|
+
<div class="fd-icon-tab-bar fd-icon-tab-bar--icon">
|
|
2438
|
+
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
2439
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--closable">
|
|
2440
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="1">
|
|
2441
|
+
<div class="fd-icon-tab-bar__container">
|
|
2442
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2443
|
+
<i class="sap-icon--filter" role="presentation"></i>
|
|
2444
|
+
</span>
|
|
2445
|
+
</div>
|
|
2446
|
+
<div class="fd-icon-tab-bar__details">
|
|
2447
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2448
|
+
</div>
|
|
2449
|
+
</a>
|
|
2450
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2451
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2452
|
+
<i class="sap-icon--decline"></i>
|
|
2453
|
+
</button>
|
|
2454
|
+
</div>
|
|
2455
|
+
</li>
|
|
2456
|
+
<li
|
|
2457
|
+
role="presentation"
|
|
2458
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive fd-icon-tab-bar__item--closable"
|
|
2459
|
+
>
|
|
2460
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7">
|
|
2461
|
+
<div class="fd-icon-tab-bar__container">
|
|
2462
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2463
|
+
<i class="sap-icon--play" role="presentation"></i>
|
|
2464
|
+
</span>
|
|
2465
|
+
</div>
|
|
2466
|
+
<div class="fd-icon-tab-bar__details">
|
|
2467
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2468
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2469
|
+
</div>
|
|
2470
|
+
</a>
|
|
2471
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2472
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2473
|
+
<i class="sap-icon--decline"></i>
|
|
2474
|
+
</button>
|
|
2475
|
+
</div>
|
|
2476
|
+
</li>
|
|
2477
|
+
<li
|
|
2478
|
+
role="presentation"
|
|
2479
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--negative fd-icon-tab-bar__item--closable"
|
|
2480
|
+
>
|
|
2481
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab8">
|
|
2482
|
+
<div class="fd-icon-tab-bar__container">
|
|
2483
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2484
|
+
<i class="sap-icon--unfavorite" role="presentation"></i>
|
|
2485
|
+
</span>
|
|
2486
|
+
</div>
|
|
2487
|
+
<div class="fd-icon-tab-bar__details">
|
|
2488
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2489
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2490
|
+
</div>
|
|
2491
|
+
</a>
|
|
2492
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2493
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2494
|
+
<i class="sap-icon--decline"></i>
|
|
2495
|
+
</button>
|
|
2496
|
+
</div>
|
|
2497
|
+
</li>
|
|
2498
|
+
<li
|
|
2499
|
+
role="presentation"
|
|
2500
|
+
class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical fd-icon-tab-bar__item--closable"
|
|
2501
|
+
>
|
|
2502
|
+
<a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9">
|
|
2503
|
+
<div class="fd-icon-tab-bar__container">
|
|
2504
|
+
<span class="fd-icon-tab-bar__icon">
|
|
2505
|
+
<i class="sap-icon--shipping-status" role="presentation"></i>
|
|
2506
|
+
</span>
|
|
2507
|
+
</div>
|
|
2508
|
+
<div class="fd-icon-tab-bar__details">
|
|
2509
|
+
<span class="fd-icon-tab-bar__counter">2</span>
|
|
2510
|
+
<span class="fd-icon-tab-bar__label">Description</span>
|
|
2511
|
+
</div>
|
|
2512
|
+
</a>
|
|
2513
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2514
|
+
<button class="fd-button fd-button--transparent fd-icon-tab-bar__button" aria-label="close tab">
|
|
2515
|
+
<i class="sap-icon--decline"></i>
|
|
2516
|
+
</button>
|
|
2517
|
+
</div>
|
|
2518
|
+
</li>
|
|
2519
|
+
|
|
2520
|
+
<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
|
|
2521
|
+
<div class="fd-popover">
|
|
2522
|
+
<div class="fd-popover__control">
|
|
2523
|
+
<button class="fd-icon-tab-bar__overflow is-active">
|
|
2524
|
+
<span class="fd-icon-tab-bar__overflow-text">More</span>
|
|
2525
|
+
<i class="sap-icon--slim-arrow-down" role="presentation"></i>
|
|
2526
|
+
</button>
|
|
2527
|
+
</div>
|
|
2528
|
+
<div
|
|
2529
|
+
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body"
|
|
2530
|
+
|
|
2531
|
+
>
|
|
2532
|
+
<ul role="list" class="fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list">
|
|
2533
|
+
<li
|
|
2534
|
+
role="listitem"
|
|
2535
|
+
tabindex="-1"
|
|
2536
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--informative fd-icon-tab-bar__list-item--closable"
|
|
2537
|
+
>
|
|
2538
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2539
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
2540
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
2541
|
+
<i class="sap-icon--letter" role="presentation"></i>
|
|
2542
|
+
</span>
|
|
2543
|
+
</span>
|
|
2544
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
2545
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(12)</span>
|
|
2546
|
+
</a>
|
|
2547
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2548
|
+
<button
|
|
2549
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2550
|
+
aria-label="close tab"
|
|
2551
|
+
>
|
|
2552
|
+
<i class="sap-icon--decline"></i>
|
|
2553
|
+
</button>
|
|
2554
|
+
</div>
|
|
2555
|
+
</li>
|
|
2556
|
+
<li
|
|
2557
|
+
role="listitem"
|
|
2558
|
+
tabindex="-1"
|
|
2559
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--closable"
|
|
2560
|
+
>
|
|
2561
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2562
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
2563
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
2564
|
+
<i class="sap-icon--activate" role="presentation"></i>
|
|
2565
|
+
</span>
|
|
2566
|
+
</span>
|
|
2567
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
2568
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(227)</span>
|
|
2569
|
+
</a>
|
|
2570
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2571
|
+
<button
|
|
2572
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2573
|
+
aria-label="close tab"
|
|
2574
|
+
>
|
|
2575
|
+
<i class="sap-icon--decline"></i>
|
|
2576
|
+
</button>
|
|
2577
|
+
</div>
|
|
2578
|
+
</li>
|
|
2579
|
+
<li
|
|
2580
|
+
role="listitem"
|
|
2581
|
+
tabindex="-1"
|
|
2582
|
+
class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--positive fd-icon-tab-bar__list-item--closable"
|
|
2583
|
+
>
|
|
2584
|
+
<a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
|
|
2585
|
+
<span class="fd-icon-tab-bar__list-item-icon-container">
|
|
2586
|
+
<span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
|
|
2587
|
+
<i class="sap-icon--jam" role="presentation"></i>
|
|
2588
|
+
</span>
|
|
2589
|
+
</span>
|
|
2590
|
+
<span class="fd-list__title fd-icon-tab-bar__list-item-title">Description</span>
|
|
2591
|
+
<span class="fd-list__counter fd-icon-tab-bar__list-item-counter">(0)</span>
|
|
2592
|
+
</a>
|
|
2593
|
+
<div class="fd-icon-tab-bar__button-container">
|
|
2594
|
+
<button
|
|
2595
|
+
class="fd-button fd-button--transparent fd-icon-tab-bar__button"
|
|
2596
|
+
aria-label="close tab"
|
|
2597
|
+
>
|
|
2598
|
+
<i class="sap-icon--decline"></i>
|
|
2599
|
+
</button>
|
|
2600
|
+
</div>
|
|
2601
|
+
</li>
|
|
2602
|
+
</ul>
|
|
2603
|
+
</div>
|
|
2604
|
+
</div>
|
|
2605
|
+
</li>
|
|
2606
|
+
</ul>
|
|
2607
|
+
```
|
|
2608
|
+
|
|
2609
|
+
## Accessibility
|
|
2610
|
+
|
|
2611
|
+
- Use semantic HTML elements where appropriate
|
|
2612
|
+
- Include proper ARIA attributes for interactive elements
|
|
2613
|
+
- Ensure keyboard navigation support
|
|
2614
|
+
- Provide adequate color contrast
|
|
2615
|
+
|
|
2616
|
+
## Source
|
|
2617
|
+
|
|
2618
|
+
This documentation was automatically generated from: `packages/styles/stories/Components/icon-tab-bar/icon-tab-bar.stories.js`
|
|
2619
|
+
|
|
2620
|
+
For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).
|