Ant Design Blazor
Collapse折叠面板
Examples
可以同时展开多个面板，这个例子默认展开了第一个。
手风琴，每次只打开一个 tab 。
嵌套折叠面板。
自定义各个面板的背景色、圆角、边距和图标。
一套没有边框的简洁样式。
你可以通过 [ShowArrow]="false" 隐藏 Panel 组件的箭头图标。
你可以通过 Extra 来指定面板右上角的额外内容。
Collapse API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Accordion | 属性启用/禁用手风琴模式。为真时，一次只能打开一个面板。打开另一个时，其余部分崩溃。 | Boolean | false |
| Bordered | 属性启用/禁用边框 | Boolean | true |
| ExpandIconPosition | 属性展开图标位置 | String | CollapseExpandIconPosition.Left |
| DefaultActiveKey | 属性默认 Panel 元素的 AntDesign.Panel.Key |
String[] | -- |
| OnChange | 属性打开的面板发生变化时执行的回调 | EventCallback<String[]> | -- |
| ExpandIcon | 属性在 AntDesign.Collapse.ExpandIconPosition 中显示的图标 |
String | right |
| ExpandIconTemplate | 属性展开图标内容以显示在 AntDesign.Collapse.ExpandIconPosition 中。优先于 AntDesign.Collapse.ExpandIcon |
RenderFragment<Boolean> | -- |
| Animation | 属性是否启用展开/折叠动画 | Boolean | -- |
| ChildContent | 属性崩溃的内容。通常包含 Panel 元素 |
RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| Activate(String[] activeKeys) | void | 激活指定的面板 |
| Deactivate(String[] inactiveKeys) | void | 停用指定的面板 |
Panel API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Active | 属性面板是否处于活动状态 | Boolean | false |
| Key | 属性面板的唯一标识符 | String | -- |
| Disabled | 属性如果为 true，则无法打开或关闭面板。 | Boolean | false |
| ShowArrow | 属性面板是否显示箭头 | Boolean | true |
| Extra | 属性面板角的额外绳子 | String | -- |
| ExtraTemplate | 属性面板角的额外内容。优先于 AntDesign.Panel.Extra |
RenderFragment | -- |
| Header | 属性面板的标题字符串 | String | -- |
| HeaderTemplate | 属性面板的标题内容。优先于 AntDesign.Panel.Header |
RenderFragment | -- |
| OnActiveChange | 属性当该面板的活动状态改变时执行的回调 | EventCallback<Boolean> | -- |
| ChildContent | 属性面板的内容。 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| SetActive(Boolean active) | void | 设置面板的活动状态 |
| Toggle() | void | 切换面板的活动状态 |