New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Animations
Updated over 6 months ago
By default, the PanelBar uses animations to expand and reveal its subitems when an item header is clicked.
You can modify these animations through the Expand and Collapse configuration options. You can also configure the PanelBar to render a single opened panel at a time.
The following example demonstrates how to configure the PanelBar animation:
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar")
.Animation(animation =>
{
animation.Enable(true);
animation.Expand(config =>
{
config.Expand();
config.Fade(FadeDirection.In);
config.Duration(AnimationDuration.Slow);
config.Zoom(ZoomDirection.In);
})
.Collapse(config =>
{
config.Fade(FadeDirection.Out);
config.Duration(AnimationDuration.Fast);
});
})
.Items(panelbar =>
{
// add panelbar items
})
)