Created by: pvdlg
Fixes #20451 (closed), fixes #19736 (closed), fixes #21223 (closed), fixes #18566 (closed), fixes #18409 (closed), fixes #20620 (closed), fixes #20156 (closed).
The intent in v4 is to support two type of markup for .nav
, tab
, scrollspy
:
- The "
<ul>
markup":
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Item</a>
</li>
</ul>
- The "
<nav>
markup":
<nav class="nav">
<a class="nav-link" href="#">Item</a>
</nav>
This PR provide the necessary fixes:
- Make scrollspy works with both markup. It is not dependent of
.nav-item
or<li>
anymore - Add corresponding unit tests
- Fix
.active
.nav-link
for both markup broken here - Fix
.nav-justified
for both markup that was broken for "<nav>
markup" - Fix
.nav-fill
for both markup that was broken for "<nav>
markup" - Clarify
scrollspy
docs to mention both markup and that.nav-link
receives the.active
class - Add a new
scrollspy
example in the docs with nested.nav-link
s - Make tabs scss works with both
<nav>
and<ul>
markup - Make tabs plugin works with both markup. It is not dependent anymore of
.nav-item
or<li>
,<a>
etc... - Revert PR #21756 to handle
list-group
with tabs in a more simple way with less specific class dependencies - Fix tabs pane transition detection that was using an unnecessary additional selector
- Add example in docs for Tabs with JS with both markup
- Add examples for tab pills and tab pills vertical
In addition it adds the support of scrollspy
and tab
to 'list-group
(per request in #20620 (closed)):
- Change
tab
plugin to support.list-group
- Add
tab
example and documentation inlist-group
page - Add unit test
- Change
scrollspy
plugin to support.list-group
- Add
scrollspy
example and documentation - Add unit test
Both tab
and scrollspy
plugin now only depends on:
- Having
.nav
or'list-group
class on the parent or sub-parent in case of nested navs - Having
.nav-link
or.list-group-item
anywhere within to add the.active
- No other markup structure / element / class is necessary, allowing the maximum of flexibility