How to create a tab-pane?

[jptillman]

The docs show how to create tabs, but not how to actually do anything useful with them. How does one create a tab-pane section and make it active with the tabs?

[jptillman]

Follow-up related question: tabs created with FB don't have "a" tags with the

aria-controls="home" role="tab" data-toggle="tab" 

attributes on them. Without this, how do I target a tab-panel for a data-toggle?

[daveaglick]

The kind of tabs you're talking about, where a content div changes based on the selected tab, are part of the Bootstrap JavaScript support (see here: http://getbootstrap.com/javascript/#tabs). FluentBootstrap doesn't have any native support for the Bootstrap JavaScript controls yet, though I hope to get to it one of these days (starting with modals, see #5). Right now, tabs can link to other pages, but not control a content div.

That said, FluentBootstrap was designed to be flexible and it's possible to make use of the Bootstrap JavaScript tabs with just a little extra code. The first thing to mention is that, in reference to your second comment, any fluent methods you apply to the tab will actually apply to the wrapped a element and not the outer li for this very reason. Therefore, you can write

@tabs.Tab("Home").SetActive().AddAttribute("aria-controls", "home")

and that will output

<li class="active">
    <a href="#" aria-controls="home">Home</a>
</li>

To replicate the example in the Bootstrap documentation, you would write

using (var tabs = Html.Bootstrap().Tabs().Begin())
{
    @tabs.Tab("Home", "#home").SetActive().AddAttribute("aria-controls", "home").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
    @tabs.Tab("Profile", "#profile").AddAttribute("aria-controls", "profile").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
    @tabs.Tab("Messages", "#messages").AddAttribute("aria-controls", "messages").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
    @tabs.Tab("Settings", "#settings").AddAttribute("aria-controls", "settings").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
}
using (Html.Bootstrap().Div().AddCss("tab-content").Begin())
{
    using (Html.Bootstrap().Div().SetId("home").AddCss("tab-pane", "active").AddAttribute("role", "tabpanel").Begin())
    {
        <text>This is the home tab.</text>
    }
    using (Html.Bootstrap().Div().SetId("profile").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
    {
        <text>This is the profile tab.</text>
    }
    using (Html.Bootstrap().Div().SetId("messages").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
    {
        <text>This is the messages tab.</text>
    }
    using (Html.Bootstrap().Div().SetId("settings").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
    {
        <text>This is the settings tab.</text>
    }
}

It's a little verbose, but it'll get the job done. You could always simplify further by creating a custom HtmlExtension that outputs the tabs and divs, that is until I get native support for the JavaScript widgets implemented and this gets much easier.