ui5-tabcontainer

Compact

Nested Tabs

Button 1 Button 2 Button 21 Button 211 Button 2121 Button 212 Text for 2.2 Button 3.1 Button 3.1.1 Button 3.1.2 Button 4 Button 41 Button 411 Button 4111 Button 41111 Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab 10.1 Content Tab 10.1.1 Content Tab Content 1 1.1 2 2.1 2.1.1 2.2

Text only End Overflow

Button 3 text text

Text only Start And End Overflow

Tab Container

Tab Container Start And End Overflow

Icon only

Button 11 Button 12 Button 3 Button 3 Button 2 Button 2 Button 3 Button 3 Button 3 Button 3 Button 3 Button 3 Button 2 Button 3

Text only

Button 11 Button 12 Button 2 Button 3 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4

Scrollable child

Toggle style Source Method Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2

Icon and Text

Content with set height: 300px

Button 11 Button 12
Button 2 Button 3

Icon and Text with tabLayout="Inline"

Content with set height: 300px

Button 11 Button 12
Button 2 Button 3

Text and additional text

Button 11 Button 12 Button 2 Button 3

Text and additional text with tabLayout="Inline"

Button 11 Button 12 Button 2 Button 3

Tabs with input elements

ui5-input

browser input

Result

TabContainer in Compact

Button 11 Button 12 Button 2 Button 3 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 4 Button 11 Button 12 Button 3 Button 3 Button 2 Button 2 Button 3 Button 3 Button 3 Button 3 Button 3 Button 3 Button 2 Button 3

No paddings for the Content

Source Method Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Cell 1 Cell 2 Source Method Cell 3 Cell 4 Cell 3 Cell 4 Cell 3 Cell 4 Cell 3 Cell 4 Cell 3 Cell 4

Background design

Header Background
Content Background
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non!

Text only Start And End Overflow Custom Overflow Buttons

Start End Button 1 Button 1 Button 1 Button 1
Select tabs programmatically Button 1 Button 1 Button 1 Button 1 Button 1 Button 1 Button 1 Button 1 Button 1 Select First Tab Select Last Tab Select a Nested Tab
Empty Tab Container

Add new selected tab programmatically

add tabs