PCUI

Include in your HTML

Copied successfully!

<link href="~/PCUIAssets/PCUI/Elements/Badge/css/Badge.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Tabs/css/Tabs.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/Tabs/js/iscroll.js"></script>

Tabs Default without badge

Notation: Tabs needs to be wrap on the container that contain "pcui" class.
Tabs needs to have a unuqie id and the class "inertia" to set the inertia active on ios devices.
"data-tab" attribute needs to be unique on every tabs and it must be the same with tabs content container "data-tab" attribute.
To select tabs onload add "active" class on the a tag and to disable, add class "disabled"

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-no-badge-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="first"><span>Default active</span></a>

                    	<a class="item" data-tab="second"><span>Default hover</span></a>

                    	<a class="item" data-tab="third"><span>Default inactive</span></a>

                    	<a class="item disabled" data-tab="fourth"><span>Default disabled</span></a>

                    	</div>

                    <div class="ui tab active" data-tab="first">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="second">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="third">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="fourth">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>

Tabs with Default badge

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-default-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="default1"><span>Default active</span><label class="badge-default">1.1k</label></a>

                    	<a class="item" data-tab="default2"><span>Default hover</span><label class="badge-default">1.1k</label></a>

                    	<a class="item" data-tab="default3"><span>Default inactive</span><label class="badge-default">1.1k</label></a>

                    	<a class="item disabled" data-tab="default4"><span>Default disabled</span><label class="badge-default">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="default1">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="default2">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="default3">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="default4">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>

Tabs with success badge

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-success-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="success1"><span>success active</span><label class="badge-success">1.1k</label></a>

                    	<a class="item" data-tab="success2"><span>success hover</span><label class="badge-success">1.1k</label></a>

                    	<a class="item" data-tab="success3"><span>success inactive</span><label class="badge-success">1.1k</label></a>

                    	<a class="item disabled" data-tab="success4"><span>success disabled</span><label class="badge-success">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="success1">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="success2">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="success3">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="success4">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>

Tabs with info badge

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-info-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="info1"><span>info active</span><label class="badge-info">1.1k</label></a>

                    	<a class="item" data-tab="info2"><span>info hover</span><label class="badge-info">1.1k</label></a>

                    	<a class="item" data-tab="info3"><span>info inactive</span><label class="badge-info">1.1k</label></a>

                    	<a class="item disabled" data-tab="info4"><span>info disabled</span><label class="badge-info">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="info1">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="info2">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="info3">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="info4">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>

Tabs with warning badge

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-warning-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="warning1"><span>warning active</span><label class="badge-warning">1.1k</label></a>

                    	<a class="item" data-tab="warning2"><span>warning hover</span><label class="badge-warning">1.1k</label></a>

                    	<a class="item" data-tab="warning3"><span>warning inactive</span><label class="badge-warning">1.1k</label></a>

                    	<a class="item disabled" data-tab="warning4"><span>warning disabled</span><label class="badge-warning">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="warning1">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="warning2">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="warning3">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="warning4">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>
                    </div>

Tabs with danger badge

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-danger-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="danger1"><span>danger active</span><label class="badge-danger">1.1k</label></a>

                    	<a class="item" data-tab="danger2"><span>danger hover</span><label class="badge-danger">1.1k</label></a>

                    	<a class="item" data-tab="danger3"><span>danger inactive</span><label class="badge-danger">1.1k</label></a>

                    	<a class="item disabled" data-tab="danger4"><span>danger disabled</span><label class="badge-danger">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="danger1">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="danger2">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="danger3">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="danger4">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>

Tabs with custom badges

a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

e Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque

Copied successfully!


                    <div class="pcui">

                    <div class="tabs inertia" id="tab-danger-inertia">

                    	<div class="ui pointing secondary menu scrollable">

                    	<a class="item active" data-tab="Open"><span>danger active</span><label class="badge-default">1.1k</label></a>

                    	<a class="item" data-tab="ReadyForWork"><span>danger hover</span><label class="badge-success">1.1k</label></a>

                    	<a class="item" data-tab="AllResponded"><span>danger inactive</span><label class="badge-success">1.1k</label></a>

                    	<a class="item" data-tab="Watched"><span>danger disabled</span><label class="badge-info">1.1k</label></a>

                    	<a class="item" data-tab="WithExpiredPlans"><span>danger disabled</span><label class="badge-danger">1.1k</label></a>

                    	</div>

                    <div class="ui tab active" data-tab="Open">

                    	<h1>a Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="ReadyForWork">

                    	<h1>b Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="AllResponded">

                    	<h1>c Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="Watched">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    <div class="ui tab" data-tab="WithExpiredPlans">

                    	<h1>d Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna. Quisque </h1>

                    </div>

                    </div>

                    </div>