与 Dash 的 dcc.Tabs 内联的其他元素？答案

【问题标题】：Additional elements inline with Dash's dcc.Tabs?与 Dash 的 dcc.Tabs 内联的其他元素？
【发布时间】：2021-12-13 13:28:56
【问题描述】：

对于我的 Dash 应用程序，我想创建一个导航栏，其中包含指向不同页面的链接以及其他内容，例如当前登录的用户，以及徽标和内容。

但是，很遗憾，我无法使用页面（如 dbc 中的“导航栏”示例），因为 WebApp 必须作为单个 URL 应用程序托管在另一个工具中。我唯一的选择是使用dcc.Tabs。但是，在我看来，dcc.Tabs 在选项卡后面强制换行。我尝试了不同的方法来防止这种情况发生，但似乎没有任何效果。到目前为止我得到的最好的是下面的例子。如何使文本与 Tabs 元素位于同一行？

tabs_styles = {
    'height': '44px', "width": "49%", "display":"inline-block"
}


app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Tabs(id="tabs-styled-with-inline", value='tab-1', children=[
            dcc.Tab(label='Page1', value='tab-1', style=tab_style, selected_style=tab_selected_style),
            dcc.Tab(label='Page2', value='tab-2', style=tab_style, selected_style=tab_selected_style),
        ], style=tabs_styles)]),
    html.Span(children=[
        "   Logged in as ",
        html.Strong(id="username")
        ], style = tabs_styles),
    html.Div(children=[
        # Distance to header:
        html.Hr(),
        html.Div(id='tabs-content-inline')
    ])
])

【问题讨论】：

标签： python css plotly-dash

【解决方案1】：

您的内联样式应该应用到您的 Tabs 组件的父 div。我在这里做了一些小的修改（查看tabs_container_styles）：

tabs_styles = {"height": "44px"}
tabs_container_styles = {"width": "49%", "display": "inline-block"}


app.layout = html.Div(
    children=[
        html.Div(
            children=[
                dcc.Tabs(
                    id="tabs-styled-with-inline",
                    value="tab-1",
                    children=[
                        dcc.Tab(label="Page1", value="tab-1"),
                        dcc.Tab(label="Page2", value="tab-2"),
                    ],
                    style=tabs_styles,
                )
            ],
            style=tabs_container_styles,
        ),
        html.Span(
            children=["   Logged in as ", html.Strong(id="username")], style=tabs_styles
        ),
        html.Div(
            children=[
                # Distance to header:
                html.Hr(),
                html.Div(id="tabs-content-inline"),
            ]
        ),
    ]
)

【讨论】：

【解决方案2】：

设置Tabs 组件的parent_style 属性而不是style 属性，并将Span 组件移动为包含Tabs 组件的div 的子级。

parent_style（dict；可选）：将（内联）样式附加到包含 Tabs 容器和内容容器的顶级父容器。

style（dict；可选）：将（内联）样式附加到包含各个 Tab 组件的 Tabs 容器。

https://dash.plotly.com/dash-core-components/tabs

MRE

from dash import Dash, html, dcc

tabs_styles = {"height": "44px", "width": "49%", "display": "inline-block"}

app = Dash()
app.layout = html.Div(
    children=[
        html.Div(
            children=[
                dcc.Tabs(
                    id="tabs-styled-with-inline",
                    value="tab-1",
                    children=[
                        dcc.Tab(
                            label="Page1", value="tab-1", style={}, selected_style={}
                        ),
                        dcc.Tab(
                            label="Page2", value="tab-2", style={}, selected_style={}
                        ),
                    ],
                    parent_style=tabs_styles,
                ),
                html.Span(
                    children=["   Logged in as ", html.Strong(id="username")], style=tabs_styles
                ),
            ]
        ),
        html.Div(
            children=[
                # Distance to header:
                html.Hr(),
                html.Div(id="tabs-content-inline"),
            ]
        ),
    ]
)

if __name__ == "__main__":
    app.run_server()

【讨论】：