显示组件 - Livepeer Docs

Back to Component Library

Return to the main component library index

Video Components

视频组件

YouTubeVideo

嵌入带有可选标题和作者署名的 YouTube 视频。在 Frame 组件内的响应式 iframe 中显示 YouTube 视频。 导入：

import { YouTubeVideo } from "/snippets/components/display/video.jsx";

属性：

属性	类型	默认值	必填	描述
`embedUrl`	`string`	-	是	YouTube 嵌入 URL（例如，“https://www.youtube.com/embed/VIDEO_ID”
`title`	`string`	`""`	否	视频标题，用于辅助功能和字幕显示
`author`	`string`	`""`	否	要在字幕中显示的作者名称
`hint`	`string`	`""`	否	可选的提示文本以显示
`caption`	`string`	-	否	自定义标题（覆盖作者/标题格式）

示例：

Code

<YouTubeVideo embedUrl="https://www.youtube.com/embed/VIDEO_ID" />

<YouTubeVideo 
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  author="Livepeer"
  title="Video Title"
  hint="Click to play"
/>

注意： YouTubeVideo 当前由于组件错误不可用。详情请参见 component-bugs.md。

视频

带有 Frame 包装器的自托管视频组件。在 Frame 组件内显示一个自托管的视频文件。 导入：

import { Video } from "/snippets/components/display/video.jsx";

属性：

属性	类型	默认值	必需	描述
`src`	`string`	-	是	视频文件路径（例如：“/snippets/assets/media/videos/HeroBackground.mp4""）
`title`	`string`	`""`	否	用于辅助功能的视频标题
`author`	`string`	`""`	否	要与麦克风图标一起显示的作者名称
`caption`	`string`	-	否	可选的标题文字（如果作者提供了，将使用图标样式）
`href`	`string`	`""`	否	作者的可选链接URL
`controls`	`boolean`	`true`	否	是否显示视频控件
`autoPlay`	`boolean`	`false`	否	是否自动播放视频
`loop`	`boolean`	`false`	否	是否循环播放视频
`muted`	`boolean`	`false`	否	是否静音视频
`children`	`ReactNode`	-	否	要渲染在 Frame 内部的可选子元素

示例：

Basic
Autoplay Loop
With Author
Code

<Video src="/snippets/assets/media/videos/HeroBackground.mp4" title="Demo Video" />

<Video 
  src="/snippets/assets/media/videos/HeroBackground.mp4" 
  autoPlay
  muted
  loop
  author="Author Name"
  title="Video Title"
/>

TitledVideo

带有叠加标题的视频组件。显示一个循环视频，可选叠加标题和样式边框。 导入：

import { TitledVideo } from "/snippets/components/display/video.jsx";

属性：

属性	类型	默认	必需	描述
`src`	`string`	-	是	视频源 URL
`title`	`string`	-	否	叠加在视频上的标题文本
`subtitle`	`string`	-	否	叠加在视频上的副标题文本
`arrow`	`boolean`	`false`	否	是否显示箭头指示器
`borderRadius`	`string`	`"12px"`	否	视频的边框半径
`style`	`object`	`{}`	否	容器的附加样式

示例:

With Title
Code

Daydream Demo

<TitledVideo
  src="/snippets/assets/media/videos/HeroBackground.mp4"
  title="Demo Title"
  subtitle="Subtitle text"
  arrow={true}
/>

ShowcaseVideo

带自定义样式的展示视频组件，用于展示页面。 导入：

import { ShowcaseVideo } from "/snippets/components/display/video.jsx";

属性： 与 TitledVideo 相同（内部使用 TitledVideo，并带有展示专用样式）

CardVideo

YouTube 视频嵌入在 Card 组件中。在 Card 组件中显示 YouTube 视频，并在下方显示标题说明。 导入：

import { CardVideo } from "/snippets/components/display/video.jsx";

属性：

属性	类型	默认	必需	描述
`embedUrl`	`string`	-	是	YouTube 嵌入 URL
`title`	`string`	-	是	视频下方显示的视频标题
`style`	`object`	-	否	附加样式

示例:

Code

<CardVideo
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  title="Video Title"
/>

注意: CardVideo 当前由于组件错误不可用。请参阅 component-bugs.md 以获取详细信息。

LinkedInEmbed

嵌入 LinkedIn 帖子，可选标题和提示。遵循 LinkedIn 的官方嵌入要求。 导入:

import { LinkedInEmbed } from "/snippets/components/display/video.jsx";

属性:

属性	类型	默认值	必需	描述
`embedUrl`	`string`	-	是	LinkedIn 嵌入 URL（应包含 ?compact=1）
`title`	`string`	`"Embedded post"`	否	用于辅助功能的文章标题
`hint`	`string`	`""`	否	可选提示文本
`caption`	`string`	-	否	可选标题文本
`height`	`string`	`"399"`	否	嵌入 iframe 的高度

示例:

Code

<LinkedInEmbed
  embedUrl="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7387171661868933120?compact=1"
  title="Livepeer Update"
  caption="Latest news from the Livepeer team"
  height="500"
/>

YouTubeVideoData

从 youtubeData.jsx 格式渲染 YouTube 视频。将 YouTube 播放 URL 转换为嵌入 URL 并以网格形式显示。 导入:

import { YouTubeVideoData } from "/snippets/components/display/video.jsx";

属性:

属性	类型	默认值	必填	描述
`items`	`Array`	`[]`	否	来自 youtubeData.jsx 的视频对象数组
`limit`	`number`	-	无	对视频数量的可选限制
`cols`	`number`	`2`	无	网格布局的列数

注意: 需要来自 snippets/automations/youtube/youtubeData.jsx

YouTubeVideoDownload

用于 YouTube 视频的占位符，具有下载功能。目前不可用（已弃用）。 注意： 此组件已弃用。使用 YouTubeVideo 代替。

Image Components

图像组件

图像

带有 Frame 包装器的图像组件。在 Frame 组件内显示图像，可选标题和提示。 导入：

import { Image } from "/snippets/components/display/image.jsx";

属性：

属性	类型	默认值	必需	描述
`src`	`string`	-	是	图片源 URL
`alt`	`string`	-	是	用于可访问性的替代文本
`caption`	`string`	-	否	显示在图片下方的可选标题
`icon`	`string`	-	否	图标名称（目前未使用）
`hint`	`string`	-	否	可选的提示文本
`fullwidth`	`boolean`	`true`	否	是否以全宽显示图片

示例:

Basic
With Caption
Code

<Image 
  src="/snippets/assets/media/images/Livepeer%20Stats.png" 
  alt="System Diagram"
  caption="Figure 1: Architecture"
/>

LinkImage

可点击的图片，在新标签页中打开。在 Frame 组件中显示一张链接到 URL 的图片。 导入:

import { LinkImage } from "/snippets/components/display/image.jsx";

属性:

属性	类型	默认	必需	描述
`src`	`string`	-	是	图片源 URL
`alt`	`string`	-	是	用于无障碍的替代文本
`caption`	`string`	-	否	显示在图片下方的可选说明
`icon`	`string`	-	否	图标名称（当前未使用）
`hint`	`string`	-	无	可选提示文本
`href`	`string`	-	是	点击图片时要导航到的 URL

示例:

Example
Code

<LinkImage 
  src="/snippets/assets/media/images/GPUImg.webp" 
  alt="Preview"
  href="/snippets/assets/media/images/DelegatorImg.avif"
  caption="Click to view full size"
/>

Embed Components

嵌入组件

MarkdownEmbed

从 URL 获取并渲染 markdown 内容。动态地从远程 URL 获取 markdown 内容并渲染它。 导入:

import { MarkdownEmbed } from "/snippets/components/display/embed.jsx";

属性:

属性	类型	默认值	必需	描述
`url`	`string`	-	是	要获取并显示的Markdown文件的URL

示例:

Code

<MarkdownEmbed url="https://raw.githubusercontent.com/user/repo/main/README.md" />

EmbedMarkdown

别名为MarkdownEmbed. 同一组件的其他名称。 导入：

import { EmbedMarkdown } from "/snippets/components/display/embed.jsx";

TwitterTimeline

使用 iframe 小部件嵌入 Twitter/X 时间线。 导入：

import { TwitterTimeline } from "/snippets/components/display/embed.jsx";

属性： 无（使用硬编码的小部件URL） ** 示例：**

Code

<TwitterTimeline />

Quote Components

报价组件

报价

带有样式边框和斜体文本的简单报价组件。 ** 导入：**

import { Quote } from "/snippets/components/display/quote.jsx";

属性:

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	引用内容

示例:

Basic
Code

“Livepeer is the future of decentralized video infrastructure.”

<Quote>
  "Your quote text here"
</Quote>

FrameQuote

带有 Frame 包装器的引用组件，可选作者、来源和图片。 导入:

import { FrameQuote } from "/snippets/components/display/quote.jsx";

属性:

属性	类型	默认	必需	描述
`children`	`ReactNode`	-	是	报价内容
`author`	`string`	-	否	作者名称
`source`	`string`	-	否	源名称
`href`	`string`	-	否	源链接 URL
`frame`	`boolean`	`true`	否	是否包裹在 Frame 中
`align`	`string`	`"right"`	否	对齐方式: “left”, “center”, “right”
`borderColor`	`string`	-	否	边框颜色
`img`	`object`	-	否	图像对象带有 `src` 和 `alt`

示例:

With Author
Code

“Livepeer enables decentralized video streaming at scale.”

Doug Petkanics

Livepeer Blog

<FrameQuote 
  author="Author Name" 
  source="Source Name"
  href="https://example.com"
  align="center"
>
  "Quote text here"
</FrameQuote>

Carousel & Showcase

轮播图与展示组件

CardCarousel

渲染一个简单的轮播图，通过固定数量的卡片进行分页。 导入:

import { CardCarousel } from "/snippets/components/display/CardCarousel.jsx";

属性:

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	卡片元素以进行显示
`visibleCount`	`number`	`3`	否	每视图显示的卡片数量
`gap`	`string\|number`	`"1.5rem"`	否	卡片之间的间隙（CSS 值）
`showDots`	`boolean`	`true`	否	是否显示页面指示点
`style`	`object`	-	否	容器样式覆盖

示例:

Code

<CardCarousel visibleCount={3}>
  <Card title="Card 1">Content 1</Card>
  <Card title="Card 2">Content 2</Card>
  <Card title="Card 3">Content 3</Card>
  <Card title="Card 4">Content 4</Card>
</CardCarousel>

ShowcaseCards

带有搜索、过滤和分页的交互式展示卡片组件。 导入：

import { ShowcaseCards } from "/snippets/components/display/showcaseCards.jsx";

属性：

属性	类型	默认	必需	描述
`items`	`Array`	`[]`	否	展示项对象数组
`limit`	`number`	`null`	否	可选的项目数量限制
`pageSize`	`number`	`10`	无	每页项目数量

项目对象结构:

title - 卡片标题
subtitle - 卡片副标题
description - 卡片描述
href - 链接 URL
categoryTags - 类别字符串数组
productTags - 产品字符串数组
mediaSrc - 图像/视频源
mediaType - “image” 或 “video”
logo - Logo 图像 URL
links - 链接对象数组

示例:

Code

const items = [
  {
    title: "Project Name",
    subtitle: "Subtitle",
    description: "Description",
    href: "/project",
    categoryTags: ["Apps"],
    productTags: ["Livepeer"],
    mediaSrc: "/images/project.png",
    mediaType: "image"
  }
];

<ShowcaseCards items={items} limit={10} pageSize={6} />

Diagram Components

图表组件

ScrollableDiagram

带有缩放控件（25%-200%）和可滚动平移支持的交互式图表查看器。 导入:

import { ScrollableDiagram } from "/snippets/components/display/zoomable-diagram.jsx";

属性:

属性	类型	默认	必需	描述
`children`	`ReactNode`	-	是	要显示的图表或内容
`title`	`string`	`""`	否	要显示在图表上方的可选标题
`maxHeight`	`string`	`"500px"`	否	可滚动容器的最大高度
`minWidth`	`string`	`"100%"`	否	内容区域的最小宽度

示例:

Basic
Code

<ScrollableDiagram title="System Architecture" maxHeight="600px">
  <img src="/snippets/assets/media/images/Livepeer%20Stats.png" alt="Architecture" />
</ScrollableDiagram>

Social Components

社交组件

SocialLinks

社交媒体图标链接用于 Livepeer。显示一行带有官方品牌颜色的社交媒体图标链接。 导入：

import { SocialLinks } from "/snippets/components/display/socialLinks.jsx";

属性：

属性	类型	默认	必需	描述
`size`	`number`	`20`	否	图标大小
`gap`	`string`	`"0.75rem"`	否	图标之间的间隙
`justify`	`string`	`"center"`	否	对齐内容：“center”, “flex-start”, “flex-end”
`color`	`string`	-	否	覆盖所有图标的颜色

示例:

Default
Custom
Code

<SocialLinks />
<SocialLinks size={24} justify="flex-start" />

Frame Mode Components

帧模式组件

用于 Mintlify 帧模式页面的组件。这些组件提供样式化的标题和文本，当在 frontmatter 中设置时可以正常工作。mode: frame已设置在 frontmatter 中。

PageHeader

全页标题组件，包含标题、副标题、描述和分隔线。 导入:

import { PageHeader } from "/snippets/components/display/frameMode.jsx";

属性:

属性	类型	默认	必需	描述
`title`	`string`	-	是	主标题文本
`subtitle`	`string`	-	否	副标题文本
`description`	`string`	-	否	描述文本
`titleColor`	`string`	`"var(--hero-text)"`	否	标题颜色
`subtitleColor`	`string`	`"var(--accent)"`	否	副标题颜色
`descriptionColor`	`string`	-	否	描述颜色
`children`	`ReactNode`	-	否	附加内容

示例:

Basic
Code

<PageHeader 
  title="Page Title"
  subtitle="Subtitle"
  description="Description"
/>

H1, H2, H3, H4, H5, H6

用于框架模式的自定义标题组件，可选图标。 导入:

import { H1, H2, H3, H4, H5, H6 } from "/snippets/components/display/frameMode.jsx";

属性（所有标题）：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	标题文本
`icon`	`string`	-	否	图标名称或主题感知 SVG 的路径
`iconSize`	`number`	变化	否	图标大小 (H1: 32, H2: 28, H3: 24, H4: 20, H5: 18, H6: 16)
`iconColor`	`string`	`"var(--accent)"`	否	图标颜色
`align`	`string`	`"left"`	否	文本对齐方式：“left”、“center”、“right”
`gap`	`string`	不同	无	图标与文本之间的间距

示例：

Headings
Code

<H1 icon="rocket">Main Title</H1>
<H2 icon="star" align="center">Section Title</H2>
<H3>Subsection</H3>

P

用于框架模式的自定义段落组件，可选图标。 导入：

import { P } from "/snippets/components/display/frameMode.jsx";

属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	段落文本
`icon`	`string`	-	否	图标名称或路径
`iconSize`	`number`	`16`	否	图标大小
`iconColor`	`string`	主题感知	否	图标颜色
`align`	`string`	`"left"`	否	文本对齐
`gap`	`string`	`"0.5rem"`	否	图标和文本之间的间距

示例:

Code

// P component with icon currently unavailable due to component bug
// Use P without icon prop, or see component-bugs.md for details
<P align="center">Centered text</P>

分隔符

用于框架模式的水平分隔线。使用适当的样式渲染水平规则。 导入：

import { Divider } from "/snippets/components/display/frameMode.jsx";

属性：

属性	类型	默认	必需	描述
`color`	`string`	`"var(--border)"`	否	分隔符的自定义颜色
`margin`	`string`	`"1.5rem 0"`	否	垂直边距
`opacity`	`number`	`0.2`	无	分隔线的不透明度

示例:

Example
Code

<Divider />
<Divider margin="2rem 0" opacity={0.5} />

Next: Content Components

Continue to Content Components →

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​视频组件

​YouTubeVideo

​视频

​TitledVideo

​ShowcaseVideo

​CardVideo

​LinkedInEmbed

​YouTubeVideoData

​YouTubeVideoDownload

​图像组件

​图像

​LinkImage

​嵌入组件

​MarkdownEmbed

​EmbedMarkdown

​TwitterTimeline

​报价组件

​报价

​FrameQuote

​轮播图与展示组件

​CardCarousel

​ShowcaseCards

​图表组件

​ScrollableDiagram

​社交组件

​SocialLinks

​帧模式组件

​PageHeader

​H1, H2, H3, H4, H5, H6

​P

​分隔符

Next: Content Components

视频组件

YouTubeVideo

视频

TitledVideo

ShowcaseVideo

CardVideo

LinkedInEmbed

YouTubeVideoData

YouTubeVideoDownload

图像组件

图像

LinkImage

嵌入组件

MarkdownEmbed

EmbedMarkdown

TwitterTimeline

报价组件

报价

FrameQuote

轮播图与展示组件

CardCarousel

ShowcaseCards

图表组件

ScrollableDiagram

社交组件

SocialLinks

帧模式组件

PageHeader

H1, H2, H3, H4, H5, H6

P

分隔符