英雄视频对话框 | Magic UI

文档

英雄视频对话框

一个英雄视频对话框组件。

在...中打开

安装

示例

顶部进入底部退出

在...中打开

用法

import { HeroVideoDialog } from "@/components/magicui/hero-video-dialog";

<HeroVideoDialog
  className="block dark:hidden"
  animationStyle="from-center"
  videoSrc="https://www.example.com/dummy-video"
  thumbnailSrc="https://www.example.com/dummy-thumbnail.png"
  thumbnailAlt="Dummy Video Thumbnail"
/>

属性

属性	类型	默认值	描述
`动画样式`	`string`	`"from-center"`	对话框的动画样式
`videoSrc`	`string`	`-`	要播放的视频URL
`thumbnailSrc`	`string`	`-`	缩略图的URL
`thumbnailAlt`	`string`	`"Video thumbnail"`	缩略图的替代文本

动画样式

animationStyle 属性接受以下值

"from-bottom"：对话框从底部进入并从底部退出
"from-center"：对话框从中心放大并缩小到中心
"from-top"：对话框从顶部进入并从顶部退出
"from-left"：对话框从左侧进入并从左侧退出
"from-right"：对话框从右侧进入并从右侧退出
"fade"：对话框淡入淡出
"top-in-bottom-out"：对话框从顶部进入并从底部退出
"left-in-right-out"：对话框从左侧进入并从右侧退出

注意

如果使用YouTube视频，请务必使用视频URL的嵌入版本。

终端宾果格

贡献