Skip to content

Latest commit

 

History

History
96 lines (80 loc) · 5.41 KB

overview.md

File metadata and controls

96 lines (80 loc) · 5.41 KB
title page_title description slug position
Overview
Overview
Learn the basics when working with the Telerik UI ExpansionPanel component for {{ site.framework }}.
htmlhelpers_expansionpanel_aspnetcore
0

ExpansionPanel Overview

{% if site.core %} The Telerik UI ExpansionPanel TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI ExpansionPanel widget. {% else %} The Telerik UI ExpansionPanel HtmlHelper is a server-side wrapper for the Kendo UI ExpansionPanel widget. {% endif %}

The ExpansionPanel is a layout component that allows the user to expand and collapse a content area within the application.

Initializing the ExpansionPanel

The following example demonstrates how to define the ExpansionPanel.

    @(Html.Kendo().ExpansionPanel()
        .Name("brazil")
        .Title("Brazil")
        .SubTitle("South America")
        .Expanded(true)
        .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
     )

{% if site.core %}

	<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
        <content>
            The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
        </content>
    </kendo-expansionpanel>

{% endif %}

Basic Configuration

The following example showcases a basic configuration of the ExpansionPanel with specified visual animations used when the user expands or collapses the component.

    @(Html.Kendo().ExpansionPanel()
        .Name("brazil")
        .Title("Brazil")
        .SubTitle("South America")
        .Expanded(true)
        .Animation(animation =>
        {
            animation.Expand(expand => expand.Effects("expandVertical fadeIn").Duration(500));
            animation.Collapse(collapse => collapse.Effects("fadeOut").Duration(1000));
        })
        .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
     )

{% if site.core %}

	<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
        <animation>
            <collapse enabled="true" effects="fadeOut" duration="1000"/>
            <expand enabled="true" effects="expandVertical fadeIn" duration="500"/>
        </animation>
        <content>
            The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
        </content>
    </kendo-expansionpanel>

{% endif %}

Functionality and Features

  • [Default State]({% slug state_htmlhelpers_expansionpanel_aspnetcore %})—The ExpansionPanel supports various states.
  • [Events]({% slug events_expansionpanel %})—The component exposes the Expand(), Collapse() and Complete() events that allow you to control its behavior.
  • [Keyboard Navigation]({% slug keynav_htmlhelpers_expansionpanel_aspnetcore %})—You can navigate through the ExpansionPanel elements with the keyboard.

Next Steps

See Also