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

Question

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

但是，不幸的是，我不能使用页面（就像在 dbc 中的“Navbar”示例中一样），因为 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')
    ])
])

Answer 1

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

parent_style (dict; optional): Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container.

style (dict; optional): Appends (inline) styles to the Tabs container holding the individual Tab components.

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()

Answer 2

您的内联样式应应用于选项卡组件的父级 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"),
            ]
        ),
    ]
)

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

Additional elements inline with Dash's dcc.Tabs?

css

python

plotly-dash