在 Taipy 应用的菜单页面中嵌入导航栏-Python教程-PHP中文网

在 Taipy 应用的菜单页面中嵌入导航栏

碧海醫心

发布： 2025-08-02 18:42:22

原创

1050人浏览过

在 taipy 应用的菜单页面中嵌入导航栏

本文档旨在解决在 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 属性，使其链接指向当前页面内的不同内容。具体做法是在链接前面添加 /，表示根路径下的页面。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

修改后的代码如下：

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 的值。