本文旨在解决 Taipy GUI 应用中，在 Menu Control 页面内嵌入 Navbar 组件，并实现页面导航功能的问题。通过修改 lov 属性中的路由配置，确保 Navbar 组件能够正确地在当前页面内切换不同的 Markdown 内容，避免跳转到新页面。本文将提供详细的配置方法和示例代码，帮助开发者更好地理解和使用 Taipy GUI 的 Navbar 组件。
Taipy GUI 中 Navbar 组件的使用
Taipy GUI 提供了强大的 Navbar 组件，方便开发者在应用中创建导航栏，实现页面之间的切换。然而，在复杂的应用结构中，例如在 Menu Control 页面内嵌入 Navbar 时，可能会遇到一些问题，例如点击 Navbar 选项时跳转到新页面，而不是在当前页面内更新内容。
问题描述
在 Menu Control 页面中，开发者希望使用 Navbar 组件在同一页面内切换不同的 Markdown 内容，例如在 "Download" 和 "Instance" 两个选项之间切换。但是，默认情况下，点击 Navbar 选项会导致页面跳转，而不是在当前页面内更新。
解决方案
解决这个问题的关键在于正确配置 Navbar 组件的 lov (List of Values) 属性。lov 属性定义了 Navbar 中显示的选项以及对应的路由。为了在当前页面内切换内容，需要在 lov 属性中的路由前面添加 /，表示相对于当前页面的相对路径。
示例代码
假设我们有以下 Markdown 内容：
instance_md = """ # <strong>Data</strong> Upload ## Let's upload data now """ download_md = """ # <strong>Data</strong> download ## Let's download data now """
然后，我们可以使用以下代码配置 Navbar 组件：
from taipy.gui import Markdown
live = [
('/download_md','Download'),
('/instance_md', 'Instance')
]
live_md = Markdown("user_interface/taipy/pages/live/live.md")在 live.md 文件中，添加以下代码：
<center><|navbar|lov={live}|></center>
<|page_content|>接下来，在 Taipy GUI 的 pages 字典中，将包含 Navbar 的页面添加到路由中：
from taipy.gui import Gui, Markdown
root = Markdown("root.md")
home_md = Markdown("home.md")
interact_md = Markdown("interact.md")
pages = {
'/': root,
"Home ":home_md,
"Interact":interact_md, # This is where the live_md page is used
}
gui = Gui(pages=pages)
gui.run(debug=True, port=5001)注意：
- 请确保 interact_md 对应的是包含 Navbar 组件的 Markdown 文件。
- <|page_content|> 用来显示动态切换的内容，你需要根据实际情况调整。
- instance_md 和 download_md 需要在 interact.py 中定义，并根据 Navbar 的选择动态赋值给 page_content 变量。
完整示例
from taipy.gui import Gui, Markdown
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')
]
page_content = download_md # 初始显示 Download 内容
interact_md = """
<center><|navbar|lov={live}|></center>
<|page_content|>
"""
def on_change(state, var_name, var_value):
if var_name == "live":
if var_value == "/download_md":
state.page_content = download_md
elif var_value == "/instance_md":
state.page_content = instance_md
root = Markdown("root.md")
home_md = Markdown("home.md")
pages = {
'/': root,
"Home ":home_md,
"Interact":interact_md,
}
gui = Gui(pages=pages)
gui.run(debug=True, port=5001)注意事项
- 确保 lov 属性中的路由与实际的 Markdown 内容对应。
- 使用 / 前缀表示相对路径，避免页面跳转。
- 根据实际需求，可以使用不同的布局和样式来定制 Navbar 组件。
总结
通过正确配置 Taipy GUI 的 Navbar 组件的 lov 属性，可以在 Menu Control 页面内实现页面导航功能，方便用户在不同的 Markdown 内容之间切换。 这种方法可以应用于更复杂的应用场景，例如在 Tab 组件内嵌入 Navbar，实现更灵活的页面布局。
