Question

考虑到迁移到新语法构建器，我正忙着摆弄流畅的引导程序，但是我无法在现有项目中重现现有的工作选项卡。有人在某个地方有一个完整的示例，展示了如何导航他们的语法模型吗？我说完整是因为他们的样本只显示了如何生成＆＃39; tablist＆＃39;部分。

Answer 1

Fluent doesn't natively support this feature.

我有一个类似的问题，Fluent Bootstrap只给了我标签/药片，我也是在动态内容之后。下面是我用来制作我所追求的Fluent代码： -

            @Html.Bootstrap().Div().AddCss(Css.PageHeader)
            {
                @Html.Bootstrap().Heading1("Nav - Tabs")
            }

            using (var tabs = Html.Bootstrap().Tabs().Begin())
            {
                @tabs.Tab("Home", "#tabhome").SetActive().AddAttribute("aria-controls", "home").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
                @tabs.Tab("Profile", "#tabprofile").AddAttribute("aria-controls", "profile").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
                @tabs.Tab("Messages", "#tabmessages").AddAttribute("aria-controls", "messages").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
                @tabs.Tab("Settings", "#tabsettings").AddAttribute("aria-controls", "settings").AddAttribute("role", "tab").AddAttribute("data-toggle", "tab")
            }
            using (Html.Bootstrap().Div().AddCss("tab-content").Begin())
            {
                using (Html.Bootstrap().Div().SetId("tabhome").AddCss("tab-pane", "active").AddAttribute("role", "tabpanel").Begin())
                {
                    <h3>Home Content</h3>
                    <text>Here is some tab content relating to the home page.</text>
                    <a class ="btn btn-link" href="https://github.com/daveaglick/FluentBootstrap/issues/40" target="_blank">Tabs not natively supported in Fluent Bootstrap</a>
                }
                using (Html.Bootstrap().Div().SetId("tabprofile").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
                {
                    <h3>Profile Content</h3>
                    <text>Here is some tab content relating to the profile page.</text>
                }
                using (Html.Bootstrap().Div().SetId("tabmessages").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
                {
                    <h3>Messages Content</h3>
                    <text>Here is some tab content relating to the messages page.</text>
                }
                using (Html.Bootstrap().Div().SetId("tabsettings").AddCss("tab-pane").AddAttribute("role", "tabpanel").Begin())
                {
                    <h3>Settings Content</h3>
                    <text>Here is some tab content relating to the settings page.</text>
                }
            }

FluentBootstrap - 标签内容

1 个答案: