Version: 2.0 |

CollapsiblePanel

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders a collapsible Card.

Properties

Name Type Description Notes Default Value
Content List<ICardItem> Gets or sets the contents of the main section of the panel.
attribute
inner element
static value
bindable
default
FooterTemplate ITemplate Gets or sets the contents of the footer section of the panel.
attribute
inner element
static value
bindable
default
FooterText String Gets or sets footer text
attribute
inner element
static value
bindable
default
HeaderTemplate ITemplate Gets or sets the contents of the header section of the panel.
attribute
inner element
static value
bindable
default
HeaderText String Gets or sets header text.
attribute
inner element
static value
bindable
default
IsCollapsed Boolean Gets or sets whether the content is collapsed or not.
attribute
inner element
static value
bindable
default
True
SubtitleText String Gets or sets subtitle of the card.
attribute
inner element
static value
bindable
default
Text String Gets or sets inner text of the card.
attribute
inner element
static value
bindable
default
TitleText String Gets or sets title of the card.
attribute
inner element
static value
bindable
default

Events

Name Type Description

Usage & Scenarios

Combines Collapsible and Card into control with allways visible header and collapsible content (+ footer).

HTML Rendered by the Control

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 IsCollapsed property.

<bs:CollapsiblePanel HeaderText="Allways displayed header" Text="Text which is hidden when collapsed." FooterText="Footer which is hidden when collapsed." />

<bs:CollapsiblePanel>
    <HeaderTemplate>
        Allways displayed header
    </HeaderTemplate>
    <Content>
        <bs:CardBody>
            Text which is hidden when collapsed.
        </bs:CardBody>
    </Content>
    <FooterTemplate>
        Footer which is hidden when collapsed.
    </FooterTemplate>
</bs:CollapsiblePanel>

Sample 2: IsCollapsed binding

Use IsCollapsed to control state of collapsible panel programmatically.

IsCollapsed property can be also use to set the initial state of Collapsible Panel.

<bs:CollapsiblePanel IsCollapsed="{value: IsCollapsed}" HeaderText="Allways displayed header" Text="Text which is hidden when collapsed." />
<dot:CheckBox Checked="{value: IsCollapsed}" Text="Is collapsed" />
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap4.CollapsiblePanel.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsCollapsed { get; set; }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message