Collapse - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Collapse Component

The Collapse component is used to toggle the visibility of content.

Methods

Name Desription
HideAsync Hides the contents of the Collapse.
Hide The sync version of HideAsync.
ShowAsync Shows the contents of the Collapse.
Show The sync version of ShowAsync.
ToggleAsync Toggles the contents of the Collapse.
Toggle The sync version of ToggleAsync.

Event Callbacks

Name Desription
OnShow Called when the Collapse is starting to show.
OnShown Called when the Collapse is completely shown.
OnHide Called when the Collapse is starting to hide.
OnHidden Called when the Collapse is completely hidden.

Examples

Using the Collapse component is demonstrated by the sample code below.

Controlling Visibility

This sample shows you how you interact with the Collapse component from your code.

@code {
    Collapse collapse1;
}

<ButtonGroup>
    <Button OnClicked="() => this.collapse1.Show()">Show</Button>
    <Button OnClicked="() => this.collapse1.Hide()">Hide</Button>
    <Button OnClicked="() => this.collapse1.Toggle()">Toggle</Button>
</ButtonGroup>
<Collapse @ref="this.collapse1">
    <Paragraph>
        This is the content inside the <code>Collapse</code> component that you can control with the buttons above.
    </Paragraph>
</Collapse>

Handling Events

Shows how you can hook into the events that the Collapse component exposes.

<Collapse
    OnShow="() => { ... }"
    OnShown="() => { ... }"
    OnHide="() => { ... }"
    OnHidden="() => { ... }">

    <Paragraph>
        Content of the Collapse component.
    </Paragraph>
</Collapse>
⚠️ **GitHub.com Fallback** ⚠️