Dash - Настройка навигационной панели для приложения панели инструментов - PullRequest
Новая
       7

Dash - Настройка навигационной панели для приложения панели инструментов

0 голосов
/ 25 сентября 2018

Я создаю Dashboard, используя Python Dash.Я использую Materialize.css Framework для CSS.Я хочу создать панель навигации , которую неупорядоченный список должен отображаться на любых устройствах: мобильных, настольных.Я имею в виду этот сайт Расширенная панель навигации с вкладками .Как сделать веб-страницу более отзывчивой?

Пример кода размещен здесь 

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

, когда я просматриваю веб-страницу в мобильном телефоне, параметры должны быть показаны в боковой навигации.Так что я могу перемещаться по разным страницам, не возвращаясь на мобильные устройства.

1 Ответ

0 голосов
/ 11 марта 2019

В приведенной вами ссылке пример содержит следующий элемент, который отсутствует в вашем макете: 

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

Это кнопка, которая открывает меню на мобильных устройствах.В частности, свойство data-target является обязательным, поскольку оно вызывает событие нажатия.

К сожалению, в настоящее время в Dash нет простого способа добавить этот атрибут в элемент HTML (см. эту тему ).

Кроме того, вы забыли указатьnav элемент имя класса 'nav-extended', но я не знаю, насколько это важно.

...