Animation Container
The Blazor Animation Container component enables you to create messages and popups such as notifications or expandable containers, even tooltips. It lets you define its animation, size and position, and arbitrary content.
The Animation Container component is part of Telerik UI for Blazor, a
professional grade UI library with 60+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use the animation container, add the TelerikAnimationContainer
tag.
How to use the Animation Container
@* Click the button to toggle the visibility of the customized popup *@
<div style="position:relative; border: 1px solid red; height: 300px;">
<TelerikButton OnClick="@ToggleContainer">Toggle Animation Container</TelerikButton>
<TelerikAnimationContainer @ref="myPopupRef" Top="50px" Left="50px" Width="250px" Height="150px" AnimationType="AnimationType.ZoomOut" Class="k-popup">
<p>
The "k-popup" class adds some background and borders which you can define through your own styles instead.
</p>
<p>
My parent element has <code>position: relative</code> to control my <code>Top</code> and <code>Left</code> offset.
</p>
</TelerikAnimationContainer>
</div>
@code {
Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef;
async Task ToggleContainer()
{
await myPopupRef.ToggleAsync();
}
}
The result from the code snippet above
The component renderes in its place of declaration and has
position: absolute
. Parent elements in the DOM with special positioning can affect its position and the calculation of theTop
andLeft
offsets.If you have
overflow: hidden
on the parent element, you may want to useposition: absolute
orfixed
on it, instead ofrelative
like in the example above.Toggling an additional element with the desired positioning together with the animation container can even let you size it up to match the viewport and adding an
@onclick
handler to it lets you hide the popup when the user clicks outside of it.
The animation container exposes the following properties and methods:
-
Show()
,Hide()
andToggle()
;ShowAsync()
,HideAsync()
andToggleAsync()
- to control whether the container is shown.- To show an animation container immediately when the page loads, use the
OnAfterRenderAsync
event.
- To show an animation container immediately when the page loads, use the
-
Width
andHeight
- to control its size. TheHeight
cannot be in percentage values, it is recommended to use pixels for it. -
Top
andLeft
- to control its offset from its parent with special positioning (relative
,absolute
,fixed
). -
AnimationType
andAnimationDuration
to control the way it is shown and hidden. The animation duration is in milliseconds (defaults to300
), and the type is of theTelerik.Blazor.AnimationType
enum with the following options:- SlideUp,
- SlideIn,
- SlideDown,
- SlideRight,
- SlideLeft,
- PushUp,
- PushDown,
- PushLeft,
- PushRight,
- Fade,
- ZoomIn,
- ZoomOut
-
ShowDelay
andHideDelay
- defines the delay between showing/hiding the component and the respective animation start. Both values are in milliseconds and default to20
. -
ParentClass
- a CSS class rendered on the main wrapping element of the Animation container. -
Class
- a CSS class rendered on the inner element of the Animation container.
Explore the animation options
@*Choose a new animation from the dropdown and toggle the container*@
<div style="position:relative;">
<select @bind="AnimType">
@foreach (var possibleAnimation in Enum.GetValues(typeof(AnimationType)))
{
<option value="@possibleAnimation">@possibleAnimation</option>
}
</select>
<TelerikButton OnClick="@ShowContainer">Show Animation Container</TelerikButton>
<TelerikAnimationContainer @ref="myPopup" Top="40px" Width="200px" Height="200px" AnimationType="@AnimType" Class="my-popup">
My content goes here.<br />
<TelerikButton OnClick="@HideContainer">Hide Animation Container</TelerikButton>
</TelerikAnimationContainer>
</div>
@code {
TelerikAnimationContainer myPopup;
AnimationType AnimType { get; set; } = AnimationType.Fade;
async Task ShowContainer()
{
await myPopup.ShowAsync();
}
async Task HideContainer()
{
await myPopup.HideAsync();
}
}
<style>
.my-popup {
border: 2px solid red;
background: #ccc;
}
</style>