Blazor动画容器
的Blazor动画容器组件使您能够创建消息和弹出窗口或可展开的容器。它允许您定义动画、大小和位置以及任意内容。
动画容器组件是Blazor的Telerik UI,一个专业级的UI库,包含100个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
要使用动画容器,请添加TelerikAnimationContainer
标签。
@*点击按钮切换自定义弹出窗口的可见性*@ 切换动画容器 我的父元素有position: relative
来控制我的Top
和Left
offset。
@code {Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef;async任务ToggleContainer(){等待myPopupRef.ToggleAsync();}}
组件呈现在声明和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();}}
改进这篇文章