<nav class="nav nav-line tx-medium pl-2">
<a href="#foo" class="nav-link active" data-toggle="tab">Foo</a>
<a href="#bar" class="nav-link nav-reload" data-toggle="tab"
data-reload-only-once="true" data-reload-show-spinner="true"
data-reload-url="http://www.bar.com">Bar</a>
<a href="#baz" class="nav-link nav-reload" data-toggle="tab"
data-reload-only-once="true" data-reload-show-spinner="true"
data-reload-url="http://www.baz.com">Baz</a>
<a href="#qux" class="nav-link nav-reload" data-toggle="tab"
data-reload-only-once="true" data-reload-show-spinner="true"
data-reload-url="http://www.qux.com">Qux</a>
</nav>
<div class="tab-content">
<div id="foo" class="tab-pane fade active show">
The quick red fox jumps over the lazy brown dog.
</div>
<div id="bar" class="tab-pane fade">
</div>
<div id="baz" class="tab-pane fade">
</div>
<div id="qux" class="tab-pane fade">
</div>
</div>
You can probably see how it works just by looking at it to some extent. The nav style empowers it and the nav-line style will put little blue lines under the selected menu items. The guts of the URLs I give will get sucked into the appropriate content divs. These should really be MVC actions out to partials to tell you the truth. Something like:
@Html.Raw(@Url.Action("VolumesReport", "Distributors", new {yin=13, yang=42}))
Sigh. Anyways, the a links all appear in a horizontal row and there is no way to get them to wrap, not even with the !important hack... as best as I can tell. I want them to wrap conditionally to accomodate mobile. If there is a way to do this, I do not yet know what it is.
Addendum 1/14/2020: It was pointed out to me today that this is really just Bootstrap stuff and not of ThemeForest's DashForge which is merely a set of skins and HTML examples for dashboard-flavored stuff. Yes, Bootstrap itself uses JavaScript to get the menu system magic to work and along those lines it uses the data- tags too.
No comments:
Post a Comment