本文档旨在解决在 Taipy 应用的菜单页面中嵌入导航栏时，内容无法正确显示以及点击导航项跳转到新页面的问题。通过修改导航栏链接的格式，使其在当前页面内切换内容，避免页面跳转，从而实现预期的导航效果。
在 Taipy 应用中实现页面内导航
在 Taipy 应用中，我们经常需要在单个页面内实现多个功能的切换，例如在一个“交互”页面中，同时提供“数据上传”和“数据下载”的功能。使用 navbar 组件可以方便地实现这一需求，但如果不注意配置，可能会出现点击导航项时跳转到新页面的问题。本文将介绍如何正确配置 navbar 组件，实现页面内的内容切换。
问题描述
假设我们已经有一个多页面 Taipy 应用，其中包含一个通过菜单控制切换的“交互”页面。现在我们希望在这个“交互”页面内部，使用 navbar 组件实现“数据上传”和“数据下载”两个功能的切换。
以下是初始代码：
instance_md = """ # <strong>Data</strong> Upload ## Let's upload data now """ download_md = """ # <strong>Data</strong> 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 <center><|navbar|lov={live}|></center>
pages = { '/': root, "Home ":home_md, "Interact":interact_md, }
这段代码存在两个问题：
- 点击导航栏的链接时，markdown 内容没有正确显示。
- 点击导航栏的链接时，会打开一个新的页面。
解决方案
要解决上述问题，需要修改 navbar 组件的 lov 属性，使其链接指向当前页面内的不同内容。具体做法是在链接前面添加 /，表示根路径下的页面。
修改后的代码如下：
instance_md = """ # <strong>Data</strong> Upload ## Let's upload data now """ download_md = """ # <strong>Data</strong> 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 <center><|navbar|lov={live}|></center>
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 = """ # <strong>Data</strong> Upload ## Let's upload data now """ download_md = """ # <strong>Data</strong> download ## Let's download data now """ live = [ ('/download_md','Download'), ('/instance_md', 'Instance') ] interact_md = """ <center><|navbar|lov={live}|></center> <|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 内容。
