Additional elements inline with Dash's dcc.Tabs?-CodePudding

For my Dash app, I want to create a navigation bar that has links to the different pages but also additional stuff, e.g. the currently logged in user, and logos and stuff.

However, I unfortunately cannot use pages (Like in the "Navbar" example in dbc) since the WebApp has to be hosted as a single-url app inside another tool. My only option is to got with

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')
    ])
])

CodePudding user response：

Set the parent_style property of your Tabs component instead of the style property and move your Span component to be a child of the div containing your Tabs component.

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

CodePudding user response：

Your inline style should be applied to the parent div of your Tabs component. I made some small modifications here (look at 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"),
            ]
        ),
    ]
)