Collapsible
in namespace DotVVM.Framework.Controls.Bootstrap4
Renders a content that can be shown and hidden.
Usage & Scenarios
A Bootstrap collapse element.
Sample 1: Basic Collapsible
Put the collapsible content inside the control.
The IsCollapsed
property specifies whether the content is collapsed or expanded. The easiest way to expand or collapse is to use a link or button and switch the property using Static Command Binding.
<dot:LinkButton Click="{staticCommand: IsCollapsed = !IsCollapsed}" Text="Expand or collapse" />
<bs:Collapsible IsCollapsed="{value: IsCollapsed}">
Collapsible content
</bs:Collapsible>
public class ViewModel
{
public bool IsCollapsed { get; set; } = true;
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
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 | |
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 | |
InnerText | String | Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children. |
attribute
static value
bindable
|
null | |
IsCollapsed | Boolean | Gets or sets whether the content is collapsed or not. |
attribute
bindable
|
True | |
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
bindable
|
True |