交互式嵌入 UI 组件

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

如果您刚开始使用 Metabase 嵌入，请考虑使用 嵌入式分析 JS 来代替交互式嵌入——这是一个改进的、更具可定制性的选项，用于嵌入交互式 Metabase 元素。交互式嵌入仍然完全受支持。

例如，您可以禁用 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);
});

参数包括：

• 操作按钮
• 附加信息
• 面包屑
• 实体类型
• 标题
• 区域设置
• Logo
• 新建按钮
• 搜索
• 侧边导航
• 顶部导航

为了确保在使用 点击行为 时保留查询参数，请将“管理员设置”中的 站点 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

是否显示打开和关闭侧边栏导航的 logo。默认值为 true。logo 的行为取决于 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 时，您可以单独控制这些子元素的可见性。