iUXING
Version
1.0
home
Home
info
About Initiative
draw
DGA Design System
code
Developing
keyboard_arrow_right
Developing
Components
keyboard_arrow_right
Actions
Buttons
DropDown
Link
Content Display
Accordion
Card
List
Data Display
Avatar
Table
Content Switcher
Structured List
Feedback
Notifications
Inline Alert
Notifications Toast
Modals
Tool Tip
Rating
Froms & Inputs
Checkbox
Text Input
Date Picker
File Upload
Radio Button
Steps
Switch
Text Area
Loading & Status
Loading
Navigational
Breadcrumbs
Menu
Pagination
Tabs
Search & Filters
Tags
UI Shell
Navigation
Table of Content
Footer
nature
Icons Set
keyboard_arrow_right
Icons Use Guide
Icons Directory
Our Services
grid_view
Request Component
settings_applications
Service Request
data_object
Low Code Platforms
Support & Help
support_agent
Support
Full Version
local_police
Featured Version
menu
mail
call
العربية
Tabs
A tablist is a set of tabs that allows for easy navigation between related information categories, removing the need to switch between different pages.
Compnent Demo
preview
Visual
code
Code
Section Title 01
Section Title 02
Section Title 03
Section Title 04
section brief comes here with good space for content 01
section brief comes here with good space for content 02
section brief comes here with good space for content 03
section brief comes here with good space for content 04
<div class="dga-tabs tabs-lg horizontal">
<<ul class="nav nav-pills" id="pills-tabA" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills01-tabA" data-bs-toggle="pill" data-bs-target="#pills01A" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
<i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
Section Title 01
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills02-tabA" data-bs-toggle="pill" data-bs-target="#pills02A" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
<i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
Section Title 02
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills03-tabA" data-bs-toggle="pill" data-bs-target="#pills03A" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
Section Title 03
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills04-tabA" data-bs-toggle="pill" data-bs-target="#pills04A" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>
<i class="dga-icon dga-square-arrow-horizontalStrokeRounded-solid"></i>
Section Title 04
</button>
</li>
/<ul>
<div class="tab-content" id="pills-tabContentD">
<div class="tab-pane fade" id="pills01A" role="tabpanel" aria-labelledby="pills01-tabA" tabindex="0">
section brief comes here with good space for content 01
</div>
<div class="tab-pane fade" id="pills02A" role="tabpanel" aria-labelledby="pills02-tabA" tabindex="0">
section brief comes here with good space for content 02
</div>
<div class="tab-pane fade" id="pills03A" role="tabpanel" aria-labelledby="pills03-tabA" tabindex="0">
section brief comes here with good space for content 03
</div>
<div class="tab-pane fade show active" id="pills04A" role="tabpanel" aria-labelledby="pills04-tabA" tabindex="0">
section brief comes here with good space for content 04
</div>
</div>
</div>