公告 欢迎您,我的朋友,目前开放免费注册,注册登录后查看更多内容!开通会员送积分,相应文档随便看,积分充值登录后个人中心内按需充值!

🔑 折叠面板控件Collapse

Collapse 是一个现代化的折叠面板控件,参考 Ant Design Collapse 组件设计

Collapse

中文名称

折叠面板控件

image.png

控件优点

Collapse 是一个现代化的折叠面板控件,参考 Ant Design Collapse 组件设计,具有以下优点:

  • 展开/折叠动画:平滑的展开和折叠过渡效果
  • 手风琴模式:支持每次只展开一个面板
  • 主题支持:实现 IThemeable 接口,支持亮暗主题切换
  • 自定义颜色:支持自定义头部背景色、悬停色等
  • 边框控制:支持边框显示/隐藏、圆角设置
  • 内容灵活:支持文本内容和自定义控件内容
  • FillRemaining:支持某面板铺满剩余空间
  • 透明背景:支持透明背景,融入各种界面风格
  • 点击交互:头部区域点击展开/折叠,鼠标悬停显示手形光标

重要参数说明

Collapse 控件属性

属性 类型 默认值 说明
ActiveKeys List<string> 空列表 当前展开的面板 key 集合
DefaultActiveKeys List<string> 空列表 默认展开的面板 key 集合
Accordion bool false 是否启用手风琴模式(每次只展开一个面板)
Bordered bool true 是否显示边框
Ghost bool false 是否启用幽灵模式(无边框、透明背景)
BorderRadius int 6 面板圆角大小(像素)
HeaderHeight int 48 面板头部高度(像素)
ContentPadding int 16 内容区域内边距(像素)
HeaderBackColor Color #FAFAFA 头部背景色
HeaderHoverBackColor Color #F5F5F5 头部悬停背景色
HeaderForeColor Color #333333 头部文字颜色
ContentBackColor Color #FFFFFF 内容区域背景色
BorderColor Color #E8E8E8 边框颜色
FollowGlobalTheme bool true 是否跟随全局主题变化
IconPosition ExpandIconPosition Start 展开图标位置(Start=左侧,End=右侧)
AutoScroll bool true 是否启用内容自动滚动
MaxContentHeight int 200 内容区域最大高度(像素)

该文档需要「免费会员」身份

请先登录后继续阅读。