交互式嵌入式 UI 组件

要更改交互式嵌入的界面，您可以在嵌入 URL 的末尾添加参数。如果您想更改嵌入中的颜色或字体，请参阅自定义外观。

例如，您可以像这样禁用 Metabase 的顶部导航栏和侧边导航菜单

your_embedding_url?top_nav=false&side_nav=false

这是一个使用 URL 构造函数向 iframe URL 添加参数的示例

const mods = "logo=false&top_nav=true&search=true&new_button=true";

app.get("/sso/metabase", restrict, (req, res) => {
  const ssoUrl = new URL("/auth/sso", METABASE_SITE_URL);
  ssoUrl.searchParams.set("jwt", signUserToken(req.session.user));
  ssoUrl.searchParams.set("return_to", `${req.query.return_to ?? "/"}?${mods}`);

  res.redirect(ssoUrl);
});

参数包括

• 操作按钮
• 附加信息
• 面包屑
• 实体类型
• 标题
• 语言环境
• 徽标
• 新建按钮
• 搜索
• 侧边导航
• 顶部导航

为确保在使用点击行为时保留查询参数，请将站点 URL 管理设置配置为您的 Metabase 服务器 URL。

action_buttons

当标题启用时，在问题页面上默认可见。

要隐藏“筛选”、“汇总”等操作按钮以及查询构建器按钮

header=false&action_buttons=false

additional_info

当标题启用时，在问题和仪表盘页面上默认可见。

要隐藏灰色文本“X 天前由 FirstName LastName 编辑”，以及包含集合、数据库和表格名称的面包屑

header=false&additional_info=false

breadcrumbs

默认显示在顶部导航栏中。集合面包屑显示项目路径（即项目所在的集合）。要隐藏面包屑

breadcrumbs=false

data_picker

data_picker 控制问题中选择数据源的菜单。

数据选择器的默认行为是

• 显示表格和模型。
• 排除指标和问题。
• 显示一个简单的下拉菜单。如果有 100 个或更多项目，Metabase 将显示一个增强的数据选择器。

您可以通过设置 data_picker=staged 来选择完整的数据选择器

上述数据选择器选择了三种实体类型

data_picker=staged&entity_types=table,model,question

entity_types

您可以在数据选择器、侧边栏和“新建”按钮菜单中显示或隐藏不同的实体类型。例如，您可能只想显示表格

entity_types=table

如果只允许表格，侧边栏将不显示模型

可用的实体类型有

• table (表格)
• model (模型)
• question（仅适用于 data_picker=staged）

您可以用逗号分隔实体类型

entity_types=table,model

header

默认在问题和仪表盘页面上可见。

要隐藏问题或仪表盘的标题、附加信息和操作按钮

header=false

locale

您可以通过参数更改用户界面的语言。例如，将语言环境设置为西班牙语

locale=es

阅读更多关于本地化的信息。

logo

是否显示用于打开和关闭侧边栏导航的徽标。默认为 true。徽标的行为取决于 side_nav 设置

new_button

默认隐藏。要显示用于创建查询或仪表盘的“+ 新建”按钮

top_nav=true&new_button=true

search

默认隐藏。要显示顶部导航栏中的搜索框

top_nav=true&search=true

side_nav

导航侧边栏默认显示在/collection 和主页路由上，在其他地方隐藏。

要允许用户最小化侧边栏

top_nav=true&side_nav=true

top_nav

默认显示。要隐藏顶部导航栏

top_nav=false

top_nav 参数控制整个顶部导航栏的可见性。当 top_nav 设置为 false 时，所有子元素（search、new_button 和 breadcrumbs）都会自动隐藏。当 top_nav 设置为 true 时，您可以单独控制这些子元素的可见性。