组件功能

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>
  

  效果对比展示如下：

  默认效果	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 及其所有子组件都不会被父组件禁用。