一、基础用法
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 及其所有子组件都不会被父组件禁用。