本文档旨在解决在 Taipy 应用的菜单页面中嵌入导航栏时，内容无法正确显示以及点击导航项跳转到新页面的问题。通过修改导航栏链接的格式，使其在当前页面内切换内容，避免页面跳转，从而实现预期的导航效果。
在 Taipy 应用中实现页面内导航
在 Taipy 应用中，我们经常需要在单个页面内实现多个功能的切换，例如在一个“交互”页面中，同时提供“数据上传”和“数据下载”的功能。使用 navbar 组件可以方便地实现这一需求，但如果不注意配置，可能会出现点击导航项时跳转到新页面的问题。本文将介绍如何正确配置 navbar 组件，实现页面内的内容切换。
问题描述
假设我们已经有一个多页面 Taipy 应用，其中包含一个通过菜单控制切换的“交互”页面。现在我们希望在这个“交互”页面内部，使用 navbar 组件实现“数据上传”和“数据下载”两个功能的切换。
以下是初始代码：
instance_md = """
# Data Upload
## Let's upload data now
"""
download_md = """
# Data download
## Let's download data now
"""
live = [
('download_md', 'Download'),
('instance_md', 'Instance')
]
live_md = Markdown("user_interface/taipy/pages/live/live.md")
live.md
<|navbar|lov={live}|> pages = {
'/': root,
"Home ":home_md,
"Interact":interact_md,
}这段代码存在两个问题：
- 点击导航栏的链接时，markdown 内容没有正确显示。
- 点击导航栏的链接时，会打开一个新的页面。
解决方案
要解决上述问题，需要修改 navbar 组件的 lov 属性，使其链接指向当前页面内的不同内容。具体做法是在链接前面添加 /，表示根路径下的页面。
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。
修改后的代码如下：
instance_md = """
# Data Upload
## Let's upload data now
"""
download_md = """
# Data download
## Let's download data now
"""
live = [
('/download_md','Download'),
('/instance_md', 'Instance')
]
live_md = Markdown("user_interface/taipy/pages/live/live.md")
live.md
<|navbar|lov={live}|> pages = {
'/': root,
"Home ":home_md,
"Interact":interact_md,
}通过在 live 列表中添加 / 前缀，navbar 组件会识别这些链接为页面内的不同内容，从而实现页面内的导航。
示例代码
以下是一个完整的示例，展示了如何在 Taipy 应用中实现页面内的导航：
from taipy.gui import Gui, Markdown
root_md = """
# Welcome to the Taipy App!
"""
home_md = """
# This is the Home Page
"""
instance_md = """
# Data Upload
## Let's upload data now
"""
download_md = """
# Data download
## Let's download data now
"""
live = [
('/download_md','Download'),
('/instance_md', 'Instance')
]
interact_md = """
<|navbar|lov={live}|>
<|page_content|>
"""
pages = {
'/': root_md,
"Home ":home_md,
"Interact":interact_md,
'/download_md': download_md,
'/instance_md': instance_md,
}
page_content = download_md # Initial content
def on_change(state, var, val):
if var == "live":
state.page_content = val
gui = Gui(pages=pages)
gui.run(debug=True)在这个例子中，我们定义了 root_md、home_md、instance_md 和 download_md 四个 markdown 文本。interact_md 包含了 navbar 组件，用于切换 instance_md 和 download_md 的内容。 page_content 变量用于动态更新页面内容。 on_change 函数用于处理 navbar 组件的点击事件，更新 page_content 的值。
注意事项
- 确保 navbar 组件的 lov 属性中的链接以 / 开头，表示根路径下的页面。
- 确保 pages 字典中包含了 navbar 组件 lov 属性中所有链接对应的 markdown 内容。
- 使用 on_change 函数处理 navbar 组件的点击事件，动态更新页面内容。
总结
通过正确配置 navbar 组件的 lov 属性，我们可以轻松地在 Taipy 应用的菜单页面中实现页面内的导航，从而提供更丰富的用户体验。 记住添加 / 前缀，并确保 pages 字典中包含了所有链接对应的 markdown 内容。
