CollapsiblePanel
in namespace DotVVM.Bootstrap5.Controls
Renders a collapsible Card.
Usage & Scenarios
Combines Collapsible and Card into control with always visible header and collapsible content (+ footer).
Sample 1: Simple Collapsible Panel
The Collapsible panel has the same API as Card. The difference is that only Header is visible when Collapsible panel is collapsed.
Collapsible panel can be collapsed/expanded by clicking on the header or using the IsExpanded property.
<bs:CollapsiblePanel HeaderText="Always displayed header" Text="Text which is hidden when collapsed." FooterText="Footer which is hidden when collapsed." />
<bs:CollapsiblePanel>
<HeaderTemplate>
<bs:Icon Type="check" />
Always displayed header
</HeaderTemplate>
<Content>
<bs:CardBody>
Custom CardBody text which is hidden when collapsed.
</bs:CardBody>
</Content>
<FooterTemplate>
Custom footer which is hidden when collapsed.
</FooterTemplate>
</bs:CollapsiblePanel>Sample 2: IsExpanded binding
Use IsExpanded to control state of collapsible panel programmatically.
IsExpanded property can be also use to set the initial state of Collapsible Panel.
<bs:CollapsiblePanel IsExpanded="{value: IsExpanded}" HeaderText="Always displayed header" Text="Text which is hidden when collapsed." />
<bs:CheckBox Checked="{value: IsExpanded}" Text="Is expanded" />public class ViewModel : DotvvmViewModelBase
{
public bool IsExpanded { get; set; }
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
BorderColor | BootstrapColor | Gets or sets the card border color. |
attribute
static value
bindable
|
null |
|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
Color | CardColor | Gets or sets the card color. Both the background and text color css classes are set. |
attribute
static value
bindable
|
null |
|
Content | List<ICardItem> | Gets or sets the card content. |
inner element
static value
default
|
null |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
FooterTemplate | ITemplate | Gets or sets a custom template for panel footer. |
inner element
static value
|
null |
|
FooterText | String | Gets or sets a plain text for panel footer. |
attribute
static value
bindable
|
null |
|
HeaderTemplate | ITemplate | Gets or sets a custom template for panel header. |
inner element
static value
|
null |
|
HeaderText | String | Gets or sets a plain text for panel header. |
attribute
static value
bindable
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
IsExpanded | IValueBinding<Boolean> | Gets or sets whether the panel content is collapsed or not. |
attribute
bindable
|
null |
|
SubtitleText | String | Gets or sets the control subtitle text. H6 tag is used. |
attribute
static value
bindable
|
null |
|
Text | String | Gets or sets the card text content. This property cannot be combined with `Content` property. |
attribute
static value
bindable
|
null |
|
TitleText | String | Gets or sets the control title text. H5 tag is used. |
attribute
static value
bindable
|
null |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
static value
bindable
|
True |