2025.3.4
首页 ▸ Dashboards ▸

按钮卡片

按钮卡片允许您添加按钮以执行任务。

三个按钮卡片的截图 三个按钮卡片的截图。

要将 按钮卡片 添加到您的用户界面：

  1. 在屏幕右上角，选择编辑 按钮。
    • 如果这是您第一次编辑仪表板，将会出现 编辑仪表板 对话框。
      • 通过编辑仪表板，您将接管此仪表板的控制。
      • 这意味着当新的仪表板元素可用时，它将不再自动更新。
      • 一旦您接管控制，就无法将此特定仪表板恢复为自动更新状态。但是，您可以创建一个新的默认仪表板。
      • 要继续，请在对话框中选择三点菜单 ，然后选择 接管控制。
  2. 添加卡片并自定义操作和功能 到您的仪表板。

此卡片的所有选项均可通过用户界面进行配置。

卡片设置

实体

卡片与之交互的实体 ID，例如 light.living_room。

名称

显示在卡片上的按钮名称。如果此字段为空且卡片与实体交互，则按钮名称默认为实体名称。否则，不显示名称。

图标

显示在卡片上的图标。如果此字段为空且卡片与实体交互，则图标默认为实体域图标。否则，不显示图标。

显示名称

切换显示或隐藏按钮名称。

显示图标

切换显示或隐藏图标。

图标高度

图标的高度，以像素为单位。

主题

用于此卡片的任何加载主题的名称。有关主题的更多信息，请参见 前端文档。

点击操作

点击卡片时执行的操作。有关更多信息，请参见 操作文档。

按住操作

点击并按住卡片时执行的操作。有关更多信息，请参见 操作文档。

YAML 配置

当您使用 YAML 模式或更喜欢在用户界面的代码编辑器中使用 YAML 时，可以使用以下 YAML 选项。

Configuration Variables

Looking for your configuration file?
type string Required

button

entity string (Optional)

卡片与之交互的实体 ID，例如 light.living_room。

name string (Optional, default: 实体名称)

显示在卡片上的按钮名称。仅当卡片与实体交互时默认为实体名称。否则，如果未配置，则不显示名称。

icon string (Optional, default: 实体域图标)

显示在卡片上的图标。仅当卡片与实体交互时默认为实体域图标。否则，如果未配置，则不显示图标。

show_name boolean (Optional, default: true)

如果为 false，则按钮名称不会显示在卡片上。

show_icon boolean (Optional, default: true)

如果为 false，则图标不会显示在卡片上。

show_state boolean (Optional, default: false)

显示状态。

icon_height string (Optional, default: auto)

图标的高度。可以使用任何 CSS 值。

state_color boolean (Optional, default: true)

如果为 false，则当实体处于活动状态时图标不会更改颜色。

tap_action map (Optional)

点击卡片时执行的操作。有关更多信息，请参见 操作文档。

hold_action map (Optional)

点击并按住卡片时执行的操作。有关更多信息，请参见 操作文档。

double_tap_action map (Optional)

双击卡片时执行的操作。有关更多信息，请参见 操作文档。

theme string (Optional)

使用任何加载的主题覆盖此卡片的主题。有关主题的更多信息，请参见 前端文档。

action_name string (Optional, default: 运行)

覆盖按钮行的默认操作名称。

示例

基本示例：

type: button
entity: light.living_room

带有按钮名称和点击卡片时运行 脚本 的按钮卡片：

带有脚本操作的按钮卡片的截图 带有脚本操作的按钮卡片的截图。 

type: button
name: 关闭灯光
show_state: false
tap_action:
  action: perform-action
  perform_action: script.turn_on
  data:
    entity_id: script.turn_off_lights

在垂直堆叠卡片上的 4 个按钮示例：

带有 4 个按钮和实体选择器的垂直堆叠卡片的截图 带有 4 个按钮和实体选择器的垂直堆叠卡片的截图。

图片显示了一个垂直堆叠卡片，其中包含 4 个排列在水平堆叠卡片中的按钮和一个实体选择器。这些按钮使用切换操作运行脚本，例如 Netflix 脚本，该脚本启动电视并打开 Netflix。要了解如何创建脚本，请参阅 脚本。

type: vertical-stack
cards:
  - entities:
      - entity: input_select.living_room_scene
        name: 场景
    show_header_toggle: false
    type: entities
  - type: horizontal-stack
    cards:
      - name: 看 Netflix
        entity: script.netflix
        type: button
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        show_name: true
        show_icon: true
      - name: 看 YouTube
        entity: script.youtube
        type: button
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        show_name: true
        show_icon: true
      - name: 唤醒电脑
        entity: script.wake_on_lan
        type: button
        tap_action:
          action: toggle
        icon: mdi:desktop-tower
        show_name: true
        show_icon: true
        show_state: false
      - name: 进入睡眠
        entity: script.sleep
        type: button
        tap_action:
          action: toggle
        icon: mdi:sleep
        hold_action:
          action: more-info
        show_name: true
        show_icon: true

相关主题