文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>腾讯云智能体开发平台>操作指南>Widget>Widget 组件>容器组件>Clickable 可点击容器

Clickable 可点击容器

最近更新时间：2026-01-15 16:08:43

我的收藏

本页目录：

组件功能

Clickable 是一个可点击的布局容器组件，具备 Box 的所有布局能力，并支持添加点击事件。

基础用法

Template 示例：
<Clickable 
  onClickAction={{ type: "sys.go_to_url", payload: { url: "/profile" } }}
  padding="16px" 
  radius="md"
>
  <Icon name="user" size="lg" />
  <Text value="查看个人资料" />
</Clickable>
该组件支持点击跳转至目标地址。
效果展示如下：




属性说明

Clickable 组件具备 Box 组件的所有布局属性和尺寸属性。

交互属性

属性名
类型
描述
默认值
onClickAction
ActionConfig
点击时触发的动作
-
disabled
boolean
是否禁用组件（禁用后不响应点击，光标显示为 not-allowed）
false

布局属性

属性名
类型
描述
默认值
direction
"row" | "col"
布局方向
"row"
children
ChatKitComponent[]
子组件列表
-
align
Alignment
交叉轴对齐方式
-
justify
Justification
主轴对齐方式
-
wrap
"nowrap" | "wrap" | "wrap-reverse"
换行方式
"nowrap"
flex
number | string
Flex 值
-
gap
number | string
子元素间距
-
padding
number | string | Spacing
内边距
-
border
number | Border | Borders
边框配置
-
background
string | ThemeColor
背景颜色
-

尺寸属性

属性名
类型
描述
默认值
height
number | string
高度
-
width
number | string
宽度
-
size
number | string
同时设置宽高
-
minHeight
number | string
最小高度
-
minWidth
number | string
最小宽度
-
minSize
number | string
最小尺寸
-
maxHeight
number | string
最大高度
-
maxWidth
number | string
最大宽度
-
maxSize
number | string
最大尺寸
-
aspectRatio
number | string
宽高比
-
radius
RadiusValue
圆角
-
margin
number | string | Spacing
外边距
-
完整的类型定义请参见 Box 盒子。

交互效果

Clickable 组件自动提供以下交互效果：
鼠标悬停在 Clickable 组件上时，显示 pointer 手形光标。
可添加 hover（鼠标悬停） 和 active（按住组件） 状态样式。
支持键盘操作，可通过 Tab 键聚焦。

禁用状态

当 disabled 设置为 true 时，Clickable 组件会进入不可交互状态：
鼠标光标变为 not-allowed 的禁用状态。
组件透明度降低（透明度降低至50%）。
点击动作被阻止，将不触发 onClickAction。
内部所有支持 disabled 属性的子组件（如 Button、Input、Checkbox 等）都会被自动禁用。
Template 示例：
<Clickable disabled={true}
  onClickAction={{ type: "sys.go_to_url", payload: { url: "/profile" } }}
  padding="16px" 
  radius="md"
>
  <Icon name="user" size="lg" />
  <Text value="查看个人资料" />
</Clickable>
效果对比展示如下：
默认效果
disabled 设置为 true 时效果







高级功能：alwaysEnabled

当父组件（例如 Card 卡片）调用 disable() 方法禁用整个 Widget 时，如果 Clickable 组件的 onClickAction 中配置了 alwaysEnabled: true，该 Clickable 组件将不会被禁用。
使用场景
表单禁用时，仍然允许用户点击"取消"或"关闭"按钮。
加载状态下，仍然允许用户取消操作。
界面禁用时，仍然允许用户查看帮助或说明信息。
示例 1：表单中的取消按钮始终可用
场景说明：在一个表单中，当父容器被禁用时，仍希望用户可以点击“取消”按钮关闭表单。
Template 示例：
<Card 
  asForm={true}
  confirm={{ label: "提交", action: { type: "form.submit" } }}
>
  <Input name="username" required={true} />
  <Input name="email" required={true} />
  <Clickable 
    onClickAction={{ 
      type: "dialog.close",
      alwaysEnabled: true
    }}
  >
    <Button label="取消" color="secondary" />
  </Clickable>
</Card>
如果父组件调用 disable() 禁用整个表单：
输入框会被禁用。
提交按钮会被禁用。
“取消”按钮不会被禁用，仍然可以点击。
示例 2：帮助按钮始终可用
场景说明：页面整体禁用或不可编辑时，仍希望用户能够点击查看帮助信息。
Template 示例：
<Clickable 
  onClickAction={{ 
    type: "help.show",
    alwaysEnabled: true
  }}
>
  <Icon name="circle-question" />
  <Text value="需要帮助？" />
</Clickable>
重要说明：
alwaysEnabled 仅对通过父组件 disable() 方法传递的禁用状态生效。
如果直接在 Clickable 上设置 disabled: true，组件仍然会被禁用。
设置 alwaysEnabled 后，Clickable 及其所有子组件都不会被父组件禁用。
中国站
目录