Question

由于Python Dash几乎没有可用的模板，因此我正在使用引导程序和标准jquery等可用资源来构建自己的仪表板/导航模板。

我将this template转换为Python Dash，但是由于某些原因，切换和某些CSS都不如实时demo那样工作。我假设我在data-*和arial-*参数上做错了，但是为了完整起见，我提供了除css之外的所有代码，可以在演示源代码中找到它们。我的模板无法像实时演示那样正常工作是什么原因？尤其是为什么切换不起作用以及标记为何不同？

app.py:

import dash
import dash_html_components as html

external_stylesheets = [
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4',
        'crossorigin': 'anonymous'
    }
]

external_scripts = [
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/solid.js',
        'integrity': 'sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js',
        'integrity': 'sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        'integrity': 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js',
        'integrity': 'sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js',
        'integrity': 'sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm',
        'crossorigin': 'anonymous'
    }
]


app = dash.Dash(
    __name__,
    external_scripts=external_scripts,
    external_stylesheets=external_stylesheets)

app.layout = html.Div(
    className='wrapper',
    children=[
        # <!-- Sidebar -->
        html.Nav(
            id='sidebar',
            children=[
                html.Div(
                    children=html.H3('DGTL'),
                    className='sidebar-header'
                ),
                html.Ul(
                    className='list-unstyled components',
                    children=[
                        html.P('Navigation'),
                        html.Li(
                            className='active',
                            children=[
                                html.A(
                                    'Home',
                                    href='#homeSubmenu',
                                    className = 'dropdown-toggle',
                                    **{'aria-expanded': 'false', 'data-toggle': 'collapse'}
                                ),
                                html.Ul(
                                    className='collapse list-unstyled',
                                    id='homeSubmenu',
                                    children=[
                                        html.Li(
                                            html.A(
                                                'Home 1',
                                                href='#'
                                            )
                                        ),
                                        html.Li(
                                            html.A(
                                                'Home 2',
                                                href='#'
                                            )
                                        ),
                                        html.Li(
                                            html.A(
                                                'Home 3',
                                                href='#'
                                            )
                                        ),
                                    ]
                                )
                            ]
                        ),
                        html.Li(
                            children=[
                                html.A(
                                    'About',
                                    href='#'
                                )
                            ]
                        ),
                        html.Li(
                            children=[
                                html.A(
                                    'Contact',
                                    href='#'
                                )
                            ]
                        )
                    ]
                )
            ]

        ),

         # <!-- Page Content -->
         html.Div(
             id='content',
             children=[
                 html.Nav(
                     className = 'navbar navbar-expand-lg navbar-light bg-light',
                     children=[
                         html.Div(
                             className = 'container-fluid',
                             children = [
                                 html.Button(
                                     type = 'button',
                                     id = 'sidebarCollapse',
                                     className = 'btn btn-info',
                                     children = [
                                         html.I(className='fas fa-align-left'),
                                         html.Span('Toggle Sidebar')
                                     ]
                                 )
                             ]
                         )
                     ]
                 )
             ]
         ),
        html.Script(
            '''
            $(document).ready(function () {
                $('#sidebarCollapse').on('click', function () {
                    $('#sidebar').toggleClass('active');
                });
            });
            '''
        )
    ]
)

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

Answer 1

您的侧边栏不切换的原因是，html.Script不是在页面加载时加载，而是在破折号呈现页面时加载。

如果您使用的是chrome，请右键单击页面并查看源代码（不要使用开发者控制台），然后您可以查看页面加载时加载的内容。

您需要将JavaScript添加为文件，以便其包含在初始页面中。有关详细信息，请参见Adding Your Own CSS and JavaScript to Dash Apps。

Answer 2

@phifre给出了部分正确的answer，因此，为了完整起见，我想给出一个可以解决所有问题和评论的

。

data-*和aria-*属性与侧边栏的切换无关。 data-*属性用于折叠上述demo中的Home子菜单。

此外，对于@JustInTime的信息，在提出此问题时，data-*和aria-*属性的问题已经fixed。

我尝试了@phifre给出的答案，但由于相同的原因，它也未成功。 javascript无法找到在稍后的时间点由破折号呈现的#sidebarCollapse元素。

“导航栏中的标签颜色错误”可能是CSS问题。

解决方案

由于侧边栏和按钮是静态的，并且不影响任何破折号组件，因此建议通过index_string插入它们。参见Customizing Dash's HTML Index Template。在下面的app.py中工作。

import dash
import dash_html_components as html

external_stylesheets = [
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4',
        'crossorigin': 'anonymous'
    }
]

external_scripts = [
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/solid.js',
        'integrity': 'sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js',
        'integrity': 'sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        'integrity': 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js',
        'integrity': 'sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js',
        'integrity': 'sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm',
        'crossorigin': 'anonymous'
    }
]


app = dash.Dash(
    __name__,
    external_scripts=external_scripts,
    external_stylesheets=external_stylesheets)

app.index_string = '''<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
        <link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style.css">
    </head>
    <body>
        <div class="wrapper">
            <nav id="sidebar">
                <div class="sidebar-header">
                    <h3>DGTL</h3>
                </div>
                <ul class="list-unstyled components">
                    <p>Navigation</p>
                    <li class="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                        <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li>
                                <a href="#">Home 1</a>
                            </li>
                            <li>
                                <a href="#">Home 2</a>
                            </li>
                            <li>
                                <a href="#">Home 3</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div id="content">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-align-left"></i>
                            <span>Toggle Sidebar</span>
                        </button>
                    </div>
                </nav>
            </div>
            {%app_entry%}
            <footer>
                {%config%}
                {%scripts%}
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#sidebarCollapse').on('click', function () {
                            $('#sidebar').toggleClass('active');
                        });
                    });
                </script>
            </footer>
        </div>
    </body>
</html>'''
app.layout = html.Div()

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

引导模板中的Python Dash导航和仪表板不起作用

2 个答案: