Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...) #21807

Merged
merged 43 commits into from
Apr 2, 2017
Merged
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
3bff97c
Fix active nav-link for nav markup
pvdlg Jan 21, 2017
9fe3960
Fix nav-justified for nav markup
pvdlg Jan 21, 2017
5b471f2
Fix nav-fill for nav markup
pvdlg Jan 21, 2017
df3dfc2
Add flex-fill utility that is referenced in the doc but not implemented
pvdlg Jan 21, 2017
536aefe
Add font-size utility used in the scroll spy docs
pvdlg Jan 21, 2017
1aee9d1
Detect parent to activate for both ul and nav markup, independently o…
pvdlg Jan 21, 2017
16e7a05
Remove unused variables
pvdlg Jan 21, 2017
98bbe1d
Unit test for both <ul> and <nav> markup
pvdlg Jan 21, 2017
009da31
Update nav docs to demonstrate nav-justified + <nav> markup
pvdlg Jan 21, 2017
2555b9e
Clarify dependency to nav, mentioned both <ul> and <nav> markup and a…
pvdlg Jan 21, 2017
29e71b7
Display dropdown as active when dropdown shown
pvdlg Jan 22, 2017
0c24034
Make tabs works with both <nav> and <ul> markup
pvdlg Jan 22, 2017
6fdfbd5
Find active tab / tab-pane independently of markup
pvdlg Jan 22, 2017
463caee
Fix tab-pane transitioning detection
pvdlg Jan 22, 2017
d69bb07
Remove unnecessary variables
pvdlg Jan 22, 2017
0515419
Add example with <nav> markup and JS
pvdlg Jan 22, 2017
47c439a
Fix html markup in docs
pvdlg Jan 22, 2017
753a6f5
Fix more markup
pvdlg Jan 22, 2017
3664142
Detect tabs list based on class .nav rather than elements
pvdlg Jan 22, 2017
7a7ae03
Merge branch 'twbs/v4-dev' into nav-scrollspy
pvdlg Jan 22, 2017
c5cebd2
Fix aria-control
pvdlg Jan 22, 2017
2392e9b
Rename NAV selector
pvdlg Jan 23, 2017
4afc8c0
Add tab pills and vertical tab pills examples
pvdlg Jan 23, 2017
15f7c44
Avoid double negative margin for <ul> markup
pvdlg Jan 23, 2017
ed386b8
Update unit test to reflect to replace tabs (that doesn't exist anymo…
pvdlg Jan 23, 2017
d7ebf9b
Fix htmlhint errors
pvdlg Jan 23, 2017
26e2361
Improve html examples
pvdlg Jan 23, 2017
689b922
Add scrollspy support to list-group
pvdlg Jan 24, 2017
3bdd1b0
Add tabs support to list-group
pvdlg Jan 24, 2017
d90ebde
Fix typo
pvdlg Jan 24, 2017
0384baa
Merge branch 'twbs/v4-dev' into nav-scrollspy
pvdlg Jan 24, 2017
b6c9ba6
Merge branch 'v4-dev' into nav-scrollspy
pvdlg Jan 25, 2017
9843459
Merge branch 'v4-dev' into nav-scrollspy
pvdlg Mar 19, 2017
569bd6c
Move nav-pills active classes under nav-pills
pvdlg Mar 19, 2017
2ac5591
Drop font-size utils
pvdlg Mar 20, 2017
f6bafb0
Remove flex-fill utils
pvdlg Mar 20, 2017
b5faf2b
Drop nav-link style for nav-justified and nav-fill
pvdlg Mar 20, 2017
f3e2886
Merge branch 'v4-dev' into nav-scrollspy
pvdlg Mar 28, 2017
e8b5f79
Merge branch 'v4-dev' into nav-scrollspy
pvdlg Mar 29, 2017
2ade5e7
Reverse 1a46d8c
pvdlg Mar 30, 2017
3227b7b
Update visual test for scroll spy and tab
pvdlg Mar 30, 2017
1996643
Fix copy/paste error in highlighted html (the actual code didn't change)
pvdlg Mar 30, 2017
eb7d9e0
Merge branch 'v4-dev' into nav-scrollspy
pvdlg Mar 31, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add tab pills and vertical tab pills examples
pvdlg committed Jan 23, 2017
commit 4afc8c05dde67d981700b7e325bdd4045433df94
133 changes: 109 additions & 24 deletions docs/components/navs.md
Original file line number Diff line number Diff line change
@@ -292,7 +292,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledBy="home-tab">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledBy="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">
@@ -326,18 +326,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledBy="home-tab">
<p>...</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">
<p>...</p>
</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-tab">
<p>...</p>
</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledBy="dropdown2-tab">
<p>...</p>
</div>
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledBy="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-tab">...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledBy="dropdown2-tab">...</div>
</div>
{% endhighlight %}

@@ -358,7 +350,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
</div>
</div>
<div class="tab-content" id="nav-abContent">
<div role="tabpanel" class="tab-pane fade show active" id="nav-home" aria-labelledBy="nav-home-tab">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledBy="nav-home-tab">
<p>Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledBy="nav-profile-tab">
@@ -388,20 +380,113 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
</div>
</nav>
<div class="tab-content" id="nav-abContent">
<div role="tabpanel" class="tab-pane fade show active" id="nav-home" aria-labelledBy="nav-home-tab">
<p>...</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledBy="nav-profile-tab">
<p>...</p>
</div>
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledBy="nav-dropdown1-tab">
<p>...</p>
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledBy="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledBy="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledBy="nav-dropdown1-tab">...</div>
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledBy="nav-dropdown2-tab">...</div>
</div>
{% endhighlight %}

The tabs plugin also works with pills.

<div class="bd-example bd-example-tabs" role="tabpanel">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="pills-abContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledBy="pills-home-tab">
<p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledBy="pills-profile-tab">
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledBy="pills-dropdown1-tab">
<p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledBy="nav-dropdown2-tab">
<p>Tempor anim aliquip qui nisi sit minim ex in cupidatat ipsum adipisicing. Ad non magna anim id ullamco do dolor sit adipisicing nulla exercitation. Qui Lorem eiusmod sint in laboris pariatur est adipisicing non sunt occaecat in mollit culpa sit. Aliquip id duis do do quis mollit ut duis. Non dolor reprehenderit do esse nostrud deserunt non eiusmod minim anim sit voluptate ipsum. Nulla elit aliqua do sunt labore velit anim nisi dolor nostrud consectetur fugiat ex qui velit ex tempor. Do cillum qui anim aliquip id cillum duis ex laboris tempor incididunt sint dolor ullamco tempor. Fugiat laboris enim anim veniam aliquip cillum irure.</p>
</div>
</div>
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledBy="nav-dropdown2-tab">
<p>...</p>
</div>

{% highlight html %}
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="pills-abContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledBy="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledBy="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledBy="pills-dropdown1-tab">...</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledBy="pills-dropdown2-tab">...</div>
</div>
{% endhighlight %}

And with vertical pills.

<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="row">
<nav class="nav flex-column nav-pills col-3" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</nav>
<div class="tab-content col-9" id="v-pills-abContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledBy="v-pills-home-tab">
<p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat. Lorem aliquip non veniam fugiat minim eiusmod sit tempor magna velit.</p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledBy="v-pills-profile-tab">
<p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui. Proident esse fugiat cillum Lorem pariatur nostrud ut adipisicing in quis tempor ex labore labore.</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledBy="v-pills-messages-tab">
<p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur. Qui aute dolor consequat amet ad enim culpa culpa eu tempor velit reprehenderit exercitation commodo ad incididunt cupidatat.</p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledBy="v-pills-settings-tab">
<p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod. Qui laborum laborum culpa commodo eu eu eu sunt elit irure duis amet nulla est amet dolore.</p>
</div>
</div>
</div>
</div>

{% highlight html %}
<div class="row">
<nav class="nav flex-column nav-pills col-3" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</nav>
<div class="tab-content col-9" id="v-pills-abContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledBy="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledBy="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledBy="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledBy="v-pills-settings-tab">...</div>
</div>
</div>
{% endhighlight %}

### Using data attributes