产品动态
产品公告
Clickable 可点击容器
组件功能
Clickable 是一个可点击的布局容器组件，具备 Box 的所有布局能力，并支持添加点击事件。
基础用法
Template 示例：
<ClickableonClickAction={{ 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 | 外边距 | - |
交互效果
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 示例：
<CardasForm={true}confirm={{ label: "提交", action: { type: "form.submit" } }}><Input name="username" required={true} /><Input name="email" required={true} /><ClickableonClickAction={{type: "dialog.close",alwaysEnabled: true}}><Button label="取消" color="secondary" /></Clickable></Card>
如果父组件调用
disable() 禁用整个表单：输入框会被禁用。
提交按钮会被禁用。
“取消”按钮不会被禁用，仍然可以点击。
示例 2：帮助按钮始终可用
场景说明：页面整体禁用或不可编辑时，仍希望用户能够点击查看帮助信息。
Template 示例：
<ClickableonClickAction={{type: "help.show",alwaysEnabled: true}}><Icon name="circle-question" /><Text value="需要帮助？" /></Clickable>
重要说明：
alwaysEnabled 仅对通过父组件 disable() 方法传递的禁用状态生效。如果直接在 Clickable 上设置
disabled: true，组件仍然会被禁用。设置
alwaysEnabled 后，Clickable 及其所有子组件都不会被父组件禁用。
文档反馈