python - 来自引导模板的 Python Dash 导航和仪表板不起作用
问题描述
由于几乎没有任何可用于 Python Dash 的模板,我正在构建自己的仪表板/导航模板,使用可用的资源,如引导程序和标准 jquery。
我将此模板转换为 Python Dash,但由于某种原因,切换和某些 css 都不能像在现场演示中那样工作。data-*
我假设我对andarial-*
参数做错了,但为了完整起见,我提供了除 之外的所有代码,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)
解决方案
您的侧边栏没有切换的原因是因为html.Script
没有在页面加载时加载,而是在稍后渲染页面时加载。
如果您使用 chrome 右键单击页面并查看源代码(不要使用开发人员控制台),那么您可以看到页面加载时加载的内容。
您需要将 javascript 添加为文件,以便将其包含在初始页面中。有关详细信息,请参阅将您自己的 CSS 和 JavaScript 添加到 Dash 应用程序。
推荐阅读
- android - RecyclerView 内容落后而不是上面的 TextView
- mysql - 如何使用 JPA 和 Hibernate 仅更新少数实体字段?
- solr - Solr 拼写检查不返回正确的排序规则
- c# - 理解 MemoryMarshal.Cast 的返回值
- javascript - 使用 multer 发送多个表单数据以表达 API
- node.js - 'C:\Program' 处的 package.json 错误中的 mongodb 文件夹绝对路径未被识别为内部或外部命令
- python - Scipy 聚类;使用物理闵可夫斯基度量?
- javascript - 如何在strapi中实现实时查询?
- pytest-html - 如何重命名pytest-html插件生成的HTML Report的标题?
- c++ - C++ 中的传教士和食人者问题