组件：卡片框

卡片框组件是一个通用的容器型组件，用于将相关内容聚合在一个具有边框、标题、内容和底部区域的视觉单元中。它支持自定义标题（带图标）、右侧操作区、内容区（可包含 HTML 或组件）和底部区域，并支持鼠标悬停浮起效果。适用于信息展示、功能入口、产品卡片、用户资料卡等场景。

典型使用场景：

产品/服务展示卡片（商品信息、服务介绍）
用户信息卡片（头像、姓名、简介、操作按钮）
数据统计卡片（数字、指标、趋势）
功能入口卡片（图标、标题、跳转链接）
文章/新闻摘要卡片（标题、摘要、阅读更多）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置卡片标题	`标题`	`卡片框1.标题 = "产品信息"`
设置标题图标	`标题图标`	`卡片框1.标题图标 = "📦"`
设置标题右侧操作区	`右侧内容`	`卡片框1.右侧内容 = "<a href='#'>更多</a>"`
设置卡片内容（HTML）	`内容`	`卡片框1.内容 = "<p>这是内容</p>"`
设置卡片底部区	`底部内容`	`卡片框1.底部内容 = "<button>操作</button>"`
设置内容区内边距	`内边距`	`卡片框1.内边距 = "16px"`
启用/禁用悬停浮起效果	`悬停浮起`	`卡片框1.悬停浮起 = 真`
显示/隐藏边框	`边框显示`	`卡片框1.边框显示 = 假`
设置内容为自定义元素	`置内容元素(元素)`	`卡片框1.置内容元素(组件.取原生对象())`

样式美化参考

卡片框的外观可通过以下属性进行精细控制：

整体容器：通过 宽度、背景颜色（建议 "#ffffff"）、边框（如 "1px solid #e8e8e8"）、边框圆角（建议 "8px"）等继承属性美化。
标题区域：标题 文本的样式可通过 字体大小、字体粗细、文本颜色 控制；标题图标可通过 标题图标 设置 emoji 或 SVG。
右侧内容：右侧内容 可放置链接、按钮或操作图标，常用于“更多”或“设置”入口。
内容区：内容 支持 HTML 字符串，可包含文本、图片、表格等；也可通过 置内容元素 传入自定义视图组件。
底部区域：底部内容 常用于放置操作按钮（如“确认”、“取消”）或额外信息。
悬停浮起：当 悬停浮起 = 真 时，鼠标悬停时卡片会浮起（产生阴影和位移效果），增强交互反馈。
内边距：内边距 控制内容区域的内边距，建议设置为 "16px" 或 "20px"。
边框显示：边框显示 = 假 可隐藏边框，适用于无框卡片设计。

基础示例

创建一个简单的信息卡片，包含标题、内容和底部按钮。

变量 卡片框1 = 创建 卡片框()
卡片框1.左边 = 50
卡片框1.顶边 = 50
卡片框1.宽度 = 300
卡片框1.标题 = "📢 通知"
卡片框1.内容 = "<p>系统将于今晚 22:00 进行维护升级，预计持续 2 小时。</p>"
卡片框1.底部内容 = "<button style='padding:6px 16px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;'>我知道了</button>"
卡片框1.边框圆角 = "8px"
卡片框1.边框 = "1px solid #e8e8e8"
卡片框1.悬停浮起 = 真
卡片框1.内边距 = "16px"
添加组件(卡片框1)

综合示例：产品展示卡片

本示例构建一个产品展示卡片，包含产品图片、标题、描述、价格标签和“加入购物车”按钮，并演示悬停浮起效果。

' ========== 创建产品卡片 ==========
变量 产品卡片 = 创建 卡片框()
产品卡片.左边 = 50
产品卡片.顶边 = 50
产品卡片.宽度 = 280
产品卡片.边框 = "1px solid #e8e8e8"
产品卡片.边框圆角 = "12px"
产品卡片.背景颜色 = "#ffffff"
产品卡片.悬停浮起 = 真
产品卡片.内边距 = "0px"  ' 内容区内边距由内部元素控制
添加组件(产品卡片)

' ========== 设置卡片内容（使用 HTML） ==========
变量 图片HTML = "<div style='width:100%;height:200px;background:#f0f0f0;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;font-size:48px;'>🖼️</div>"
变量 标题HTML = "<h3 style='margin:12px 16px 4px;font-size:18px;'>无线降噪耳机</h3>"
变量 描述HTML = "<p style='margin:0 16px 8px;color:#666;font-size:14px;'>主动降噪，40小时续航，轻巧便携</p>"
变量 价格HTML = "<p style='margin:0 16px 12px;font-size:20px;color:#ff4d4f;font-weight:bold;'>¥399.00 <span style='font-size:14px;color:#999;text-decoration:line-through;'>¥499.00</span></p>"
变量 按钮HTML = "<button style='margin:0 16px 16px;width:calc(100% - 32px);padding:10px;background:#1890ff;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;'>加入购物车</button>"

产品卡片.内容 = 图片HTML + 标题HTML + 描述HTML + 价格HTML + 按钮HTML

' ========== 为按钮添加点击事件（通过DOM操作） ==========
' 由于内容为HTML字符串，无法直接在轻语言中绑定事件，
' 这里演示通过取原生对象后查找按钮并绑定事件
变量 原生卡片 = 产品卡片.取原生对象()
变量 按钮元素 = 查找元素By选择器("#" + 原生卡片.id + " button")
如果(按钮元素 != 空)
    ' 注意：这里使用原生JS事件绑定
    按钮元素.onclick = () => {
        弹出提示("已加入购物车！")
    }
结束 如果

属性详解

标题

类型： 文本型
说明： 设置或获取卡片标题文本。标题会显示在卡片顶部，字体加粗。

内容

类型： 文本型
说明： 设置卡片主体内容，支持 HTML 字符串。可包含文本、图片、表格、按钮等任意 HTML 元素。设置后会自动渲染到内容区。

右侧内容

类型： 文本型
说明： 设置标题右侧的操作区内容，支持 HTML 字符串。常用于放置“更多”链接或操作按钮。该内容会与标题在同一行右对齐。

底部内容

类型： 文本型
说明： 设置卡片底部区域的内容，支持 HTML 字符串。常用于放置操作按钮、补充信息或分隔线。

标题图标

类型： 文本型
说明： 设置标题前的图标，支持 emoji（如 "📦"）或 SVG 代码。该图标会显示在标题文本左侧。

悬停浮起

类型： 逻辑型
说明： 设置或获取是否在鼠标悬停时启用浮起效果（阴影加深、轻微上移）。默认为 假。

内边距

类型： 文本型
说明： 设置卡片内容区的内边距，支持 CSS 值（如 "16px"、"12px 20px"）。默认值由框架决定，通常为 "16px"。

边框显示

类型： 逻辑型
说明： 设置或获取是否显示卡片边框。当为 假 时，边框被隐藏（但 边框 属性仍可设置，仅控制显示状态）。默认为 真。

函数详解

置内容元素(元素)

功能： 将卡片的内容区设置为指定的 DOM 元素或视图组件。此方法会覆盖 内容 属性设置的 HTML 字符串。
参数： 元素，可以是原生 DOM 节点或视图组件的实例（会自动取其原生对象）。
返回值： 无。

示例：

' 创建自定义内容组件
变量 内容容器 = 创建 弹性布局()
内容容器.方向 = "column"
变量 标签1 = 创建 标签()
标签1.文本 = "自定义内容"
内容容器.添加组件(标签1)
' 设置为卡片内容
卡片框1.置内容元素(内容容器)

⚠️ 注意事项

内容类型：内容 和 右侧内容、底部内容 均为 HTML 字符串，若需要插入复杂组件（如按钮、表单等），建议使用 置内容元素 方法传入视图组件。
事件绑定：通过 HTML 字符串添加的按钮等元素，其事件需要原生 DOM 方式绑定（如 onclick），无法直接使用轻语言的 置被单击回调。若需要轻语言风格事件，请使用 置内容元素 传入视图组件。
悬停浮起效果：悬停浮起 会为卡片添加 hover 的阴影过渡效果，可能与自定义 CSS 冲突，注意样式优先级。
内边距冲突：若 内容 中已经包含内边距，内边距 属性可能导致双重内边距，建议根据实际情况调整。
边框显示：边框显示 = 假 会隐藏边框，但 边框 属性仍存在，如需完全移除边框可设置 边框 = "none"。
标题图标：标题图标仅支持文本（如 emoji）或 HTML 字符串（如 SVG），不支持图片 URL。如需图片，可在标题中使用 HTML 标签。
卡片尺寸：卡片框本身是一个容器，其宽度由 宽度 属性控制，高度默认随内容自动撑开。若需固定高度，可设置 高度 属性，但内容可能溢出。
与视图的继承关系：卡片框继承自 视图，因此拥有所有视图属性和方法，如 置被单击回调 可为整个卡片绑定点击事件。

轻语言网站开发SDK文档