Tabs
Examples of tabbable panes of local content.
Tabs v1
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
All due dates to tasks & other notes in this project will appear here.
All progress, data analysis to tasks in this project will appear here.
All attachments to tasks & conversations in this project will appear here.
HTML:
<!-- Nav -->
<div class="u-tab u-tab--md mb-md-4">
<div class="row justify-content-between align-items-center">
<div class="col-md-5 order-md-2 text-md-right">
<!-- Select -->
<select class="js-select u-select" data-width="fit" data-style="bg-transparent text-secondary font-size-14 font-weight-normal pl-0">
<option value="taskSelect1" title="View" selected>Completed tasks</option>
<option value="taskSelect2">Incomplete tasks</option>
<option value="taskSelect3">All tasks</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-select u-select" data-width="fit" data-style="bg-transparent text-secondary font-size-14 font-weight-normal">
<option value="sortSelect1" title="Sort" selected>None</option>
<option value="sortSelect2">Project</option>
<option value="sortSelect3">Due date</option>
<option value="sortSelect4">Likes</option>
</select>
<!-- End Select -->
</div>
<div class="col-md-7 order-md-1">
<!-- Nav Pills -->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item u-tab__nav-item">
<a class="nav-link u-tab__nav-link active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">Assigned</a>
</li>
<li class="nav-item u-tab__nav-item">
<a class="nav-link u-tab__nav-link" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Calendar</a>
</li>
<li class="nav-item u-tab__nav-item">
<a class="nav-link u-tab__nav-link" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Progress</a>
</li>
<li class="nav-item u-tab__nav-item">
<a class="nav-link u-tab__nav-link" id="pills-four-tab" data-toggle="pill" href="#pills-four" role="tab" aria-controls="pills-four" aria-selected="false">Files</a>
</li>
</ul>
<!-- End Nav Pills -->
</div>
</div>
</div>
<!-- End Nav -->
<!-- Nav Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Content One -->
<div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
</div>
<!-- End Content One -->
<!-- Content Two -->
<div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
<div class="text-center py-4">
<div class="w-md-80 w-lg-50 text-center mx-auto">
<img class="w-100 mb-7" src="../assets/svg/flat-icons/events-flat-concept-illustration.svg" alt="SVG Illustration">
<h4 class="h5 font-weight-normal">All due dates to tasks & other notes in this project will appear here.</h4>
</div>
</div>
</div>
<!-- End Content Two -->
<!-- Content Three -->
<div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
<div class="text-center py-4">
<div class="w-md-80 w-lg-50 text-center mx-auto">
<img class="w-100 mb-7" src="../assets/svg/flat-icons/data-report-flat-concept-illustration.svg" alt="SVG Illustration">
<h4 class="h5 font-weight-normal">All progress, data analysis to tasks in this project will appear here.</h4>
</div>
</div>
</div>
<!-- End Content Three -->
<!-- Content Four -->
<div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab">
<div class="text-center py-4">
<div class="w-md-80 w-lg-50 text-center mx-auto">
<img class="w-100 mb-7" src="../assets/svg/flat-icons/image-upload-flat-concept-illustration.svg" alt="SVG Illustration">
<h4 class="h5 font-weight-normal">All attachments to tasks & conversations in this project will appear here.</h4>
</div>
</div>
</div>
<!-- End Content Four -->
</div>
<!-- End Nav Content -->
CSS library:
<link rel="stylesheet" href="assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of custom select
$('.js-select').selectpicker();
});
</script>