Dash Mantime 组件不允许使用图标

Question

我正在尝试使用 dash_iconify 在我的 Plotly Dash 应用程序中使用图标。我尝试在这里使用与本教程类似的内容：https://www.dash-mantine-components.com/components/navlink

但是，在我的应用程序中，当我尝试在 dmc.Navlink 中插入图标时，出现以下错误： TypeError: The

dash_mantine_components.NavLink

组件（版本 0.14.0）收到了意外的关键字参数：

icon

允许的参数：active、aria-、autoContrast、bg、bga、bgp、bgr、bgsz、bottom、c、children、childrenOffset、className、classNames、color、darkHidden、data-、description、disableRightSectionRotation、disabled、display、ff 、flex、fs、fw、fz、h、hiddenFrom、href、id、插入、标签、左、leftSection、lh、lightHidden、lts、m、mah、maw、mb、me、mih、miw、ml、mod、mr 、ms、mt、mx、my、n_clicks、noWrap、不透明度、打开、p、pb、pe、pl、pos、pr、ps、pt、px、py、刷新、右、rightSection、样式、样式、ta、tabIndex 、目标、td、顶部、tt、无样式、变体、visibleFrom、w

我已经安装了所有应该安装的库，并且还包含了 get_icon() 函数。这是我正在使用的代码：

import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify


def get_icon(icon):
    return DashIconify(icon=icon, height=16)


html.Div(
    [
        dmc.NavLink(
            label="With icon",
            icon=get_icon(icon="bi:house-door-fill"),
        ),
        dmc.NavLink(
            label="With right section",
            icon=get_icon(icon="tabler:gauge"),
            rightSection=get_icon(icon="tabler-chevron-right"),
        ),
        dmc.NavLink(
            label="Disabled",
            icon=get_icon(icon="tabler:circle-off"),
            disabled=True,
        ),
        dmc.NavLink(
            label="With description",
            description="Additional information",
            icon=dmc.Badge(
                "3", size="xs", variant="filled", color="red", w=16, h=16, p=0
            ),
        ),
        dmc.NavLink(
            label="Active subtle",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="subtle",
            active=True,
        ),
        dmc.NavLink(
            label="Active light",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            active=True,
        ),
        dmc.NavLink(
            label="Active filled",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="filled",
            active=True,
        ),
    ],
    style={"width": 240},
)

我尝试回滚到 dash_mantine_components 的其他版本，但没有成功。该代码直接来自文档。

Answer 1

Dash Mantime 组件依赖于 Mantine React 库，从 v0.14.0 DMC 开始使用 Mantine v7，带来了重大变化，其中：

icon

道具已重命名为

leftSection

就是这样！

另请参阅文档，其中包含与特定版本的 DMC 相匹配的示例。