英雄视频对话框 | 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"
/>

属性

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

动画样式

animationStyle 属性接受以下值

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

注意

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

终端便当网格

贡献