UI: Add nav pills component #94703

Merged
Márton Lente merged 4 commits from component-nav-pills into v2 2024-09-26 12:16:56 +02:00
Showing only changes of commit 8c7dc2c225 - Show all commits

View File

@ -261,31 +261,30 @@
Navigation pills have a horizontal layout by default.
</p>
<div aria-orientation="horizontal" class="mb-4 nav nav-pills" role="tablist">
<a class="nav-pills-item active" href="/">
<a class="nav-pills-item active" href="#">
<i class="i-home"></i>
Home
</a>
<a class="nav-pills-item " href="/settings/profile">
<a class="nav-pills-item " href="#">
<i class="i-user"></i>
Profile
</a>
<div class="nav-pills-divider"></div>
<a class="nav-pills-item " href="/active-sessions/">
<i class="i-activity"></i>
Sessions
<a class="nav-pills-item " href="#">
<i class="i-users"></i>
Teams
</a>
<a class="nav-pills-item " href="/applications">
<i class="i-link"></i>
Authenticated Apps
<a class="nav-pills-item " href="#">
<i class="i-lock"></i>
Tokens
</a>
<div class="nav-pills-divider"></div>
<a class="nav-pills-item " href="/change">
<i class="i-shield"></i>
Password
<a class="nav-pills-item " href="#">
<i class="i-heart"></i>
Favourites
</a>
<a class="nav-pills-item " href="/delete-my-account">
<i class="i-trash"></i>
Delete Account
<a class="nav-pills-item " href="#">
<i class="i-layers"></i>
My Presentations
</a>
</div>
</div>
@ -297,29 +296,58 @@
<div class="row">
<aside class="col-4">
<div aria-orientation="vertical" class="flex-column mb-4 nav nav-pills" role="tablist">
<a class="nav-pills-item active" href="/">
<a class="nav-pills-item active" href="#">
<i class="i-home"></i>
Home
</a>
<a class="nav-pills-item " href="/settings/profile">
<a class="nav-pills-item " href="#">
<i class="i-user"></i>
Profile
</a>
<a class="nav-pills-item " href="#">
<i class="i-users"></i>
Teams
</a>
<a class="nav-pills-item " href="#">
<i class="i-lock"></i>
Tokens
</a>
<div class="nav-pills-divider"></div>
<a class="nav-pills-item " href="/active-sessions/">
<a class="nav-pills-item " href="#">
<i class="i-heart"></i>
Favourites
</a>
<a class="nav-pills-item " href="#">
<i class="i-layers"></i>
My Presentations
</a>
<a class="nav-pills-item " href="#">
<i class="i-tv"></i>
My Festival Entries
</a>
<a class="nav-pills-item " href="#">
<i class="i-ticket"></i>
Tickets
</a>
<div class="nav-pills-divider"></div>
<a class="nav-pills-item " href="#">
<i class="i-activity"></i>
Sessions
</a>
<a class="nav-pills-item " href="/applications">
<a class="nav-pills-item " href="#">
<i class="i-link"></i>
Authenticated Apps
</a>
<div class="nav-pills-divider"></div>
<a class="nav-pills-item " href="/change">
<a class="nav-pills-item " href="#">
<i class="i-shield"></i>
Multi-factor Authentication
</a>
<a class="nav-pills-item " href="#">
<i class="i-shield"></i>
Password
</a>
<a class="nav-pills-item " href="/delete-my-account">
<a class="nav-pills-item " href="#">
<i class="i-trash"></i>
Delete Account
</a>