Blazor Collapse

Creating interactive user interfaces with dynamic content visibility.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple collapsible

Toggle Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<BlazorCollapseToggleButton Variants="new[] {BaseVariants.Primary}" TargetToken="blazor-collapse-default-1">Toggle</BlazorCollapseToggleButton>
<BlazorCollapse Token="blazor-collapse-default-1">
    ...
</BlazorCollapse>

Collapse with initial uncollapse

Toggle Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<BlazorCollapseToggleButton Variants="new[] {BaseVariants.Warning}" TargetToken="blazor-collapse-default-2">Toggle</BlazorCollapseToggleButton>
<BlazorCollapse InitialVisibility="true" Token="blazor-collapse-default-2">
    ...
</BlazorCollapse>

Collapse toggle button inside

Toggle Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. I don't need the TargetToken because I am inside Blazor Collapse.
<BlazorCollapseToggleButton Variants="new[] {BaseVariants.Danger}" TargetToken="blazor-collapse-button-inside">Toggle</BlazorCollapseToggleButton>
<BlazorCollapse InitialVisibility="true" Token="blazor-collapse-button-inside">
    ...
    <BlazorCollapseToggleButton Variants="new[] {BaseVariants.Success}">I don't need the <code>TargetToken</code> because I am inside <code>Blazor Collapse</code>.</BlazorCollapseToggleButton>
</BlazorCollapse>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorCollapse blazor-collapse
BlazorButton btn
BlazorButton.small btn-sm
BlazorButton.large btn-lg
BlazorButton.primary btn-primary
BlazorButton.secondary btn-secondary
BlazorButton.success btn-success
BlazorButton.danger btn-danger
BlazorButton.warning btn-warning
BlazorButton.info btn-info

Parameters

BlazorCollapse

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
ShowClass string Specifies the CSS class to be applied when BlazorCollapse component is visible.
HideClass string Specifies the CSS class to be applied when BlazorCollapse component is collapsed.
InitialVisibility bool Controls the initial visibility state of an collapse body section in the BlazorCollapse component. Set to true for the body to be initially visible.

BlazorCollapseToggleButton

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
TargetToken string Identifies the target component for interaction. It establishes connections and enables actions on specific targets.
Variants string[] Specifies the variant of the component.
CollapseShowingClass string Specifies the CSS class to be applied when BlazorCollapse component is visible.
CollapseHidingClass string Specifies the CSS class to be applied when BlazorCollapse component is collapsed.
OnClick EventCallback A method to be executed when the user clicks on the button
An error has occurred. This application may no longer respond until reloaded. Reload 🗙