Clickable 可点击容器

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 组件的所有布局属性和尺寸属性。

交互属性

布局属性

尺寸属性

完整的类型定义请参见 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>

效果对比展示如下：

高级功能：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 及其所有子组件都不会被父组件禁用。