组件/动画容器

Blazor动画容器

的Blazor动画容器组件使您能够创建消息和弹出窗口或可展开的容器。它允许您定义动画、大小和位置以及任意内容。

Telerik UI的Blazor忍者形象

动画容器组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

如果您正在寻找一个选项来创建通知，工具提示或可膨胀容器等抽屉里，您可以使用专用组件。

要使用动画容器，请添加TelerikAnimationContainer标签。

如何使用动画容器

@*点击按钮切换自定义弹出窗口的可见性*@ 
 切换动画容器  
我的父元素有position: relative来控制我的Top和Left offset。
  
 @code {Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef;async任务ToggleContainer(){等待myPopupRef.ToggleAsync();}}

上面代码片段的结果

Blazor动画容器概述

组件呈现在声明和has的位置位置:绝对的．DOM中具有特殊定位的父元素会影响其位置和计算前而且左偏移量。

如果你有隐藏溢出:在父元素上，您可能希望使用位置:绝对的或固定在上面，而不是相对就像上面的例子一样。

与动画容器一起切换具有所需位置的附加元素甚至可以让您调整它的大小以匹配视口并添加一个@onclick处理程序可以让你隐藏弹出窗口时，用户点击它的外部。

动画容器公开了以下属性和方法:

  • ShowAsync ()，HideAsync ()而且ToggleAsync ()-控制是否显示容器。
    • 要在页面加载时立即显示动画容器，请使用OnAfterRenderAsync事件。
  • 宽度而且高度-控制大小．的高度不能为百分比值，建议使用像素表示。
  • 前而且左-以特殊定位控制其与父节点的偏移量(相对，绝对，固定）.
  • AnimationType而且AnimationDuration来控制显示和隐藏的方式。动画持续时间以毫秒为单位(默认为300)，类型为Telerik.Blazor.AnimationType具有以下选项的Enum:
    • SlideUp,
    • SlideIn,
    • SlideDown,
    • SlideRight,
    • SlideLeft,
    • 俯卧撑,
    • 叠加,
    • PushLeft,
    • PushRight,
    • 褪色,
    • ZoomIn,
    • ZoomOut
  • ShowDelay而且HideDelay-定义了显示/隐藏组件和各自动画开始之间的延迟。这两个值都以毫秒为单位，默认为20.．
  • ParentClass在动画容器的主包装元素上呈现的CSS类。
  • 类-在动画容器的内部元素上渲染的CSS类。

探索动画选项

@*从下拉菜单中选择一个新的动画，并切换容器*@ 
  显示动画容器 我的内容在这里。
 隐藏动画容器  
 @code {TelerikAnimationContainer myPopup;AnimationType AnimType {get;设置;} = AnimationType.Fade;async任务ShowContainer(){等待myPopup.ShowAsync();} async任务HideContainer(){等待myPopup.HideAsync();}} 
         
          
         
        改进这篇文章
Baidu
map