面板组件 (Panel)
一个灵活、可定制的面板系统，用于组织和展示内容，提供多种类型和变体。
面板组件使用指南
面板是一种容器组件，用于分组和展示内容，支持多种状态和样式变体。
基础结构
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">面板标题</h3>
<div class="panel-actions">
<button class="button -small">操作</button>
</div>
</div>
<div class="panel-body">
面板内容...
</div>
<div class="panel-footer">
<button class="button">确认</button>
<button class="button -secondary">取消</button>
</div>
</div>
组件类型
面板支持以下类型变体：
-primary- 主色调面板-secondary- 次色调面板-info- 信息色面板-success- 成功色面板-warning- 警告色面板-danger- 危险色面板
样式变体
面板支持以下样式变体：
-borderless- 无边框面板-no-header- 无头部面板-no-footer- 无底部面板-compact- 紧凑面板-large- 大型面板-shadow- 阴影面板-shadow-lg- 大阴影面板-collapsible- 可折叠面板-loading- 加载状态面板-scrollable- 可滚动面板
面板布局
面板可以与其他组件组合使用，创建复杂的布局：
panel-group- 面板组容器，用于组合多个面板panel-grid- 面板内网格布局，用于组织面板内容
基础面板示例
基本面板
这是一个基础面板示例，包含头部、主体和底部。
面板是组织内容的理想选择，可以用于数据展示、表单容器等场景。
无头部面板
这个面板没有头部区域，只有主体内容。
适用于不需要标题和操作按钮的场景
无边框面板
这个面板没有边框，更加简洁。
面板类型示例
主色调面板
使用主色调的面板，通常用于重要内容或主要操作区域。
次色调面板
使用次色调的面板，用于辅助内容或次要操作区域。
信息面板
用于展示信息性内容，通常使用蓝色系。
成功面板
用于展示成功状态或积极信息，通常使用绿色系。
警告面板
用于展示警告信息，需要用户注意，通常使用黄色系。
危险面板
用于展示错误或危险信息，需要用户立即关注，通常使用红色系。
面板样式变体
阴影面板
带有阴影效果的面板，增加视觉层次感。
大阴影面板
带有更大阴影效果的面板，更加突出显示。
紧凑面板
内部间距更小的紧凑面板，适用于空间有限的场景。
大型面板
内部间距更大的大型面板，适用于需要更多空间的场景。
更大的内容区域
可折叠面板
点击头部可以折叠或展开面板内容。
可折叠面板适用于内容较多但不是始终需要显示的场景。
可折叠内容区域
- 项目 1
- 项目 2
- 项目 3
加载状态面板
内容加载中...
特殊功能面板
可滚动面板
长内容可滚动面板
当面板内容超出最大高度时，将显示滚动条。
最大高度默认为400px，可以根据需要调整。
内容行 1
内容行 2
内容行 3
内容行 4
内容行 5
内容行 6
内容行 7
内容行 8
内容行 9
内容行 10
内容行 11
内容行 12
内容行 13
内容行 14
内容行 15
内容行 16
内容行 17
内容行 18
内容行 19
内容行 20
面板组
面板组项目 1
这是面板组中的第一个面板。
面板组项目 2
这是面板组中的第二个面板，使用了主色调。
面板组项目 3
这是面板组中的第三个面板，使用了信息色调。
面板内容布局
面板内网格布局
面板内可以使用网格布局来组织内容：
项目 1
网格项目内容
项目 2
网格项目内容
项目 3
网格项目内容
项目 4
网格项目内容
面板与其他组件组合
表单面板
带卡片的面板
卡片 1
面板内的卡片内容
卡片 2
带有主色调的卡片