Blazor | ComponentOne
Controls / Layout Controls / Expander / Styling
In This Topic
    Styling
    In This Topic

    Expander provides various options to style its UI and elements. It allows you to use different styling properties available in the C1Expander class which allows you to easily style various visual aspects of the control. The following table lists all the styling properties available in the C1Expander class:

    Properties Description
    Style Changes the style of Expander
    HeaderStyle Changes the style of the expander header

    Blazor Expander control with styles set on header and expand icon

    The following code demonstrates the use of the available styling properties in the C1Expander class to change the appearance of the Expander control:

    Index.razor
    Copy Code 
    <C1Expander Header="@("Click")" HeaderStyle="@("background-color: BurlyWood; color:#fff1e6; font-family:cursive;font-size:22px")" 
            Style="@("overflow:hidden;background-color:Beige;width:8%;box-shadow:0px 5px 5px rgba(0,0,0,0.2)")">
            <img src="/Image/c1icon.png" />
</C1Expander>