Question

我的仪表板应用程序具有基于可用仪表板文档中找到的配方的导航。它可以工作，但是看起来不太好。谁知道介绍菜单的更好方法？我不想开发特殊的流星组件，但是我很乐意使用一种当前可用的框架（bootstrap，语义，...）。

import dash,copy
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
server = app.server

nav_menu = html.Div([
    dcc.Link('  [Page A]  ', href='/page-a'),
    dcc.Link('  [Page B]  ', href='/page-b'),
])

app.layout = html.Div([

    dcc.Location(id='url', refresh=False),
    nav_menu,

    html.Div( [html.Div( [html.H6('A')], id = 'page-a' ),
               html.Div( [html.H6('B')], id = 'page-b' )],
              style = {'display': 'block'})
])

@app.callback(
    Output(component_id='page-a', component_property='style'),
    [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-a':
        return {'display': 'block'}
    else:
        return {'display': 'none'}

@app.callback(
    Output(component_id='page-b', component_property='style'),
    [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-b':
        return {'display': 'block'}
    else:
        return {'display': 'none'}

app.css.append_css({"external_url": [
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
    "https://codepen.io/chriddyp/pen/rzyyWo.css"
]})

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

还可以在绘图破折号中使用Bootstrap。

示例：

nav_menu = html.Div([
    html.Ul([
            html.Li([
                    dcc.Link('Page A', href='/page-a')
                    ], className=''),
            html.Li([
                    dcc.Link('Page B', href='/page-b')
                    ], className=''),
            ], className='nav navbar-nav')
], className='navbar navbar-default navbar-static-top')

要使用css类，还需要集成Bootstrap：

app.css.append_css({"external_url": [
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
    "https://codepen.io/chriddyp/pen/rzyyWo.css",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
]})

Answer 2

您可能想查看bootstrap components package中的破折号。包含许多看起来不错且易于使用的预制组件。

import dash,copy
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
server = app.server
import dash_bootstrap_components as dbc

nav_menu= dbc.NavbarSimple(
    children=[
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("Pages", header=True),
                dbc.DropdownMenuItem("Page 1", href="/page-a"),
                dbc.DropdownMenuItem("Page 1", href="/page-b"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)

app.layout = html.Div([

    dcc.Location(id='url', refresh=False),
    nav_menu,

    html.Div( [html.Div( [html.H6('A')], id = 'page-a' ),
               html.Div( [html.H6('B')], id = 'page-b' )],
              style = {'display': 'block'})
])

python仪表板破折号导航

2 个答案: