面板

1. 组件概述

面板是一个布局容器组件，用于将相关内容分组展示。它自带头部区域（可显示标题）和内容区域，还可以在底部添加按钮组。面板通过视觉边框和标题将一组相关内容与页面其他部分区分开来，帮助用户快速理解页面结构。适用于信息卡片、配置区块、功能模块等需要视觉分隔的场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 对话结果展示区。在智能问答应用中，使用面板组件包裹 AI 的回答内容，设置标题为”AI 回复”，内容区放置 Markdown 组件展示回答。通过面板的边框和标题，让用户清晰区分问题输入区和回答展示区。
• 场景二：学习任务配置模块。在学习辅导类应用中，使用面板组件创建”学习设置”区块，标题设为”学习偏好设置”，内容区放置难度选择、学科选择等表单项，底部添加”保存设置”按钮。面板将这些相关配置项组织在一起，界面更加清晰。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

基本折叠组

配置项	说明
标题	面板顶部显示的标题文字，用于说明该面板的内容主题。例如”用户信息”、“AI 回复”、“设置选项”等。可以设置为静态文字或绑定变量。
内容区新增内容	点击此按钮可以快速向面板的内容区添加新的组件。这是一个便捷操作入口，方便在面板内部构建页面内容。

设计

基本样式折叠组

配置项	说明
基本样式	面板整体的外观样式设置，包括内外边距、背景色、边框等。可以调整面板与周围元素的间距，以及面板本身的视觉效果。

标题区样式折叠组

配置项	说明
标题区样式	面板头部区域的样式设置，包括内外边距、背景色、边框等。可以让标题区与内容区有不同的视觉效果。
文字	标题文字的字体样式设置，包括字号、颜色、粗细等。可以调整标题的视觉突出程度。

内容区样式折叠组

配置项	说明
内容区样式	面板内容区域的样式设置，包括内外边距、背景色、边框等。可以调整内容区的视觉效果。
表单展示模式	当面板内包含表单项时，控制表单项的排列方式。可选：继承（使用上级设置）、正常（标题在上，输入框在下）、内联（标题和输入框在同一行，紧凑排列）、水平（标题和输入框在同一行，按比例分配宽度）。
表单水平占比	当表单展示模式为”水平”时，可以进一步设置标题和输入框的宽度比例。选择”继承”使用上级设置，选择”自定义”可以手动调整左右占比。

底部区样式折叠组

配置项	说明
底部区样式	面板底部区域（按钮组所在区域）的样式设置，包括内外边距、背景色、边框等。
固定底部	开启后，面板底部的按钮区域会固定在页面底部，不随内容滚动。适用于面板内容较长、需要随时操作底部按钮的场景。

CSS 类名折叠组

配置项	说明
头部区域	为面板头部区域添加自定义 CSS 类名，用于更精细的样式控制。
内容区域	为面板内容区域添加自定义 CSS 类名。
底部区域	为面板底部区域添加自定义 CSS 类名。
按钮外层	为按钮组的外层容器添加自定义 CSS 类名。
主题	面板的整体配色主题，决定面板边框和标题区的颜色风格。可选：默认（灰色）、主色（蓝色）、提示（浅蓝色）、成功（绿色）、警告（橙色）、危险（红色）。不同主题适用于不同的信息类型，例如成功提示用绿色，警告信息用橙色。