时间戳

首页 > 解决方案 > Dash - 为仪表板应用程序设置导航栏

python-3.x - Dash - 为仪表板应用程序设置导航栏

问题描述

我正在使用 Python Dash 构建仪表板。我正在为 css 使用Materialize.css框架。我想创建一个导航栏，无序列表必须显示在任何设备上，无论是移动设备还是桌面设备。我指的是这个网站Extended Nav Bar with Tabs。如何让网页响应更快？

示例代码发布在这里

 layout = html.Div(id='main-page-content',children=[

    #nav wrapper starts here
    html.Div(
        children=[
            #nav bar
            html.Nav(
                #inside div
                html.Div(
                    children=[
                        html.A(
                            'Dashboard Analytics',
                            className='brand-logo',
                            href='/'
                        ),
                        #ul list components
                        html.Ul(
                            children=[
                               html.Li(html.A('Configuration', href='/apps/config')),
                               html.Li(html.A('Segmentation', href='/apps/segmentation')),
                               html.Li(html.A('Main Page', href='/apps/users')), 
                            ],
                            id='nav-mobile',
                            className='right hide-on-med-and-down'
                        ), 
                    ],
                    className='nav-wrapper'
                ),style={'background-color':'#008EFE'}),

        ],
        className='navbar-fixed'
    ),
])

#define the external urls
external_css = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css']

for css in external_css:
    app.css.append_css({'external_url': css})

external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']

for js in external_js:
  app.scripts.append_script({'external_url': js})

当我在移动设备中查看网页时，选项必须显示在侧边导航中。所以我可以浏览不同的页面，而无需实际返回移动设备。

标签： python-3.xplotlyplotly-dash

解决方案

在您提供的链接中，该示例包含以下元素，您的布局中缺少该元素：

<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

这是在移动设备上打开菜单的按钮。具体来说，该data-target属性是必不可少的，因为它会触发点击事件。

不幸的是，目前在 Dash 中没有简单的方法可以将此属性添加到 HTML 元素（请参阅此线程）。

另外，您忘记给nav元素指定类名'nav-extended'，但我不知道这有多重要。

推荐阅读