基础组件 - Livepeer Docs

Back to Component Library

Return to the main component library index

Buttons & Actions

按钮 & 操作

DownloadButton

交互式下载按钮，通过懒加载优化性能。 导入:

import { DownloadButton } from "/snippets/components/primitives/buttons.jsx";

属性:

属性	类型	默认值	必填	描述
`label`	`string`	`"Download"`	否	按钮文本标签
`icon`	`string`	`"download"`	否	左侧图标名称
`downloadLink`	`string`	-	是	要下载的文件的URL
`rightIcon`	`string`	`""`	否	可选的右侧图标名称
`border`	`boolean`	`false`	否	是否在按钮周围显示边框

示例：

Basic
Custom Label
With Icons
Code

<DownloadButton downloadLink="https://example.com/file.pdf" />

<DownloadButton 
  label="Download PDF" 
  downloadLink="https://example.com/file.pdf" 
  icon="file-pdf"
  rightIcon="arrow-right"
  border={true}
/>

BasicBtn

基本按钮功能的占位符组件。目前返回空的 div。 导入:

import { BasicBtn } from "/snippets/components/primitives/buttons.jsx";

属性: 无 注意: 这是一个占位符组件，目前不可用。

Icons & Branding

图标与品牌

LivepeerIcon

主题感知的 Livepeer 图标，可自动适应浅色/深色模式。 导入：

import { LivepeerIcon } from "/snippets/components/primitives/icons.jsx";

属性：

属性	类型	默认	必需	描述
`size`	`number`	`16`	否	图标大小（像素）
`color`	`string`	主题感知	否	自定义颜色覆盖（默认为主题感知颜色）

示例：

Default
Custom Color
Code

Default size

Size 24

Size 32

<LivepeerIcon />
<LivepeerIcon size={24} />
<LivepeerIcon size={32} color="#00cc88" />

LivepeerIconFlipped

水平翻转的 Livepeer 图标。适用于装饰性用途或方向指示器。 导入：

import { LivepeerIconFlipped } from "/snippets/components/primitives/icons.jsx";

属性: 与 LivepeerIcon 相同（接受所有图标组件属性） 示例:

Example
Code

Normal

Flipped

<LivepeerIconFlipped size={24} />

LivepeerSVG

Livepeer 标志的内联 SVG 版本。使用 em 单位进行响应式 sizing。 导入:

import { LivepeerSVG } from "/snippets/components/primitives/icons.jsx";

属性:

属性	类型	默认	必需	描述
`size`	`number`	`24`	否	Size parameter (currently unused, uses 1em)
`...props`	`object`	-	否	Additional SVG props

示例:

Example
Code

<LivepeerSVG size={32} />

LivepeerIconOld

使用 light symbol SVG 文件的旧版 Livepeer 图标组件。 导入:

import { LivepeerIconOld } from "/snippets/components/primitives/icons.jsx";

属性: 接受所有图标组件属性 注意: 这是旧版本。建议使用LivepeerIcon 用于新代码。

Links & Navigation

链接与导航

GotoLink

带有图标用于内部文档页面的简单导航链接。 导入:

import { GotoLink } from "/snippets/components/primitives/links.jsx";

属性:

属性	类型	默认	必需	描述
`label`	`string`	-	是	链接文本/标签
`relativePath`	`string`	-	是	相对 URL 路径
`text`	`string`	`""`	否	在链接之前显示的可选文本
`icon`	`string`	`"arrow-turn-down-right"`	否	要显示的图标

示例:

Basic
With Text
Custom Icon
Code

Getting Started

<GotoLink label="Getting Started" relativePath="/get-started" />
<GotoLink label="API Reference" relativePath="/api" text="See the" icon="book" />

GotoCard

用于导航的卡片组件，包含链接、图标和可选的CTA。 导入：

import { GotoCard } from "/snippets/components/primitives/links.jsx";

属性：

属性	类型	默认	必需	描述
`label`	`string`	-	是	卡片标题
`relativePath`	`string`	-	是	相对 URL 路径
`icon`	`string`	`"arrow-turn-down-right"`	否	要显示的图标
`text`	`ReactNode`	-	是	卡片内容
`cta`	`string`	`""`	否	行动呼吁按钮文本
`...props`	`object`	-	否	附加的 Card 组件属性

示例：

Basic
With CTA
Code

API Reference

Complete API documentation with examples and code snippets

<GotoCard
  label="API Reference"
  relativePath="/api/reference"
  text="Complete API documentation"
  cta="View Docs"
/>

CustomCallout

一个样式化的提示框，支持自定义图标和颜色。会自动将十六进制颜色转换为 rgba 以正确处理不透明度。 导入：

import { CustomCallout } from "/snippets/components/primitives/links.jsx";

属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	在提示框中显示的内容
`icon`	`string`	`"lightbulb"`	否	要显示的图标名称
`color`	`string`	主题强调色	否	图标、边框和背景的主要颜色
`iconSize`	`number`	`16`	否	图标的大小（以像素为单位）
`textSize`	`string`	`"0.875rem"`	否	文本内容的字体大小
`textColor`	`string`	匹配`color`	否	文本颜色（默认与图标颜色匹配）

示例：

Info
Warning
Success
Code

This is an informational message with a blue info icon.

<CustomCallout icon="info" color="#3b82f6">
  Important information message
</CustomCallout>

<CustomCallout icon="warning" color="#ef4444">
  Warning message
</CustomCallout>

TipWithArrow

右上角带有一个箭头指示器的提示框。类似于 CustomCallout，但包含一个箭头图标。 导入：

import { TipWithArrow } from "/snippets/components/primitives/links.jsx";

属性:

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	在提示中显示的内容
`icon`	`string`	`"lightbulb"`	否	在左侧显示的主要图标
`arrowIcon`	`string`	`"arrow-up-right"`	否	右上角显示的箭头图标
`color`	`string`	主题强调色	否	图标、边框和背景的主要颜色
`iconSize`	`number`	`16`	否	主图标大小（像素）
`arrowSize`	`number`	`16`	否	箭头图标大小（像素）

示例:

Basic
Custom Arrow
Code

Check out the related documentation for more details!

<TipWithArrow icon="info" color="#3b82f6">
  Check out the related documentation!
</TipWithArrow>

LinkArrow

带有箭头图标和可选换行的链接组件。 导入:

import { LinkArrow } from "/snippets/components/primitives/links.jsx";

属性:

属性	类型	默认值	必需	描述
`href`	`string`	-	是	链接网址
`label`	`string`	-	是	链接文本
`newline`	`boolean`	`true`	否	是否在链接前添加换行
`borderColor`	`string`	-	否	可选的边框颜色

示例:

Example
Code

Visit Livepeer

<LinkArrow href="https://livepeer.org" label="Visit Livepeer" />
<LinkArrow href="/v2/home/mission-control" label="Documentation" newline={false} />

Text & Typography

文本与排版

副标题

带可自定义样式的标题文本组件。 导入：

import { Subtitle } from "/snippets/components/primitives/text.jsx";

属性：

属性	类型	默认值	必需	描述
`text`	`string`	-	否	副标题文本（children 的替代）
`children`	`ReactNode`	-	否	替代内容（text 的替代）
`style`	`object`	`{}`	否	自定义样式对象
`style.fontSize`	`string`	`"1rem"`	否	字体大小
`style.fontStyle`	`string`	`"italic"`	否	字体样式
`style.color`	`string`	`"var(--accent)"`	否	文本颜色
`style.marginBottom`	`string`	`0`	否	底部边距

示例:

Basic
Custom Style
Code

This is a subtitle

<Subtitle text="This is a subtitle" />
<Subtitle style={{ fontSize: "1.2rem", color: "#00cc88" }}>
  Custom styled subtitle
</Subtitle>

复制文本

带复制按钮的内联代码。以代码块显示文本，并带有可点击的复制按钮。 导入:

import { CopyText } from "/snippets/components/primitives/text.jsx";

属性:

属性	类型	默认值	必需	描述
`text`	`string`	-	是	要显示和复制的文本
`label`	`string`	-	否	文本之前的可选标签

示例:

Basic
With Label
Code

0x1234567890abcdef

Address:0x1234567890abcdef

<CopyText text="0x1234567890abcdef" />
<CopyText text="npm install livepeer" label="Command:" />

CardTitleTextWithArrow

带有箭头图标集成到标题中的卡片标题组件。 导入:

import { CardTitleTextWithArrow } from "/snippets/components/primitives/text.jsx";

属性:

属性	类型	默认值	必填	描述
`children`	`ReactNode`	-	是	标题文本内容
`...cardProps`	`object`	-	无	附加的 Card 组件属性

示例:

Example
Code

Card Title with Arrow

<CardTitleTextWithArrow>
  My Card Title
</CardTitleTextWithArrow>

AccordionTitleWithArrow

带箭头图标的折叠标题组件。在折叠内容中使用链接，而不是标题，以避免嵌套的交互元素。 导入：

import { AccordionTitleWithArrow } from "/snippets/components/primitives/text.jsx";

属性：

属性	类型	默认	必需	描述
`text`	`string`	-	否	标题文本（如果`children` 提供则可选）
`children`	`ReactNode`	-	无	替代方案为`text`
`color`	`string`	`"var(--text)"`	无	文本颜色

示例:

Example
Code

Learn More

<AccordionTitleWithArrow text="Learn More" />

Dividers

分隔线

自定义分隔线

带有Livepeer品牌图标的装饰性水平分隔线，分隔线两端均可选。分隔线之间可包含居中文本。图标会自动适应亮色/暗色主题。 导入：

import { CustomDivider } from "/snippets/components/primitives/divider.jsx";

属性：

属性	类型	默认值	必需	描述
`middleText`	`string`	`""`	否	可选文本，显示在分隔线的中心
`color`	`string`	`"var(--border)"`	否	中间文本的颜色
`style`	`object`	`{}`	否	额外的 CSS 样式
`style.margin`	`string`	`"24px 0"`	否	垂直边距
`style.fontSize`	`string`	`"16px"`	否	中间文本的字体大小

示例:

Basic
With Text
Custom Color
Code

<CustomDivider />
<CustomDivider middleText="Section Break" />
<CustomDivider middleText="OR" color="#2d9a67" />

Layout

布局原语

用于在 MDX 文件中组织内容而无需内联样式布局组件。

FlexContainer

用于在行或列中排列项目的 Flexbox 容器组件。 导入：

import { FlexContainer } from "/snippets/components/primitives/layout.jsx";

属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	要显示的内容
`direction`	`string`	`"row"`	否	flex 方向: “row"	"column"	"row-reverse"	"column-reverse”
`gap`	`string`	`"1rem"`	无	项目之间的间隙 (CSS 值)
`align`	`string`	`"flex-start"`	无	对齐项目: “flex-start"	"center"	"flex-end"	"stretch”
`justify`	`string`	`"flex-start"`	无	对齐内容：“flex-start"	"center"	"flex-end"	"space-between"	"space-around"	"space-evenly”
`wrap`	`boolean`	`false`	否	允许换行
`style`	`object`	`{}`	否	额外的内联样式

示例：

Row Layout
Column Layout
Centered
Code

Card 1

Content 1

Card 2

Content 2

Card 3

Content 3

<FlexContainer gap="1rem">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</FlexContainer>

<FlexContainer direction="column" gap="0.5rem" align="center">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</FlexContainer>

GridContainer

用于网格布局的 CSS 网格容器组件。 导入：

import { GridContainer } from "/snippets/components/primitives/layout.jsx";

属性：

属性	类型	默认	必需	描述
`children`	`ReactNode`	-	是	要显示的内容
`columns`	`string\|number`	-	否	列数或 CSS grid-template-columns 值
`gap`	`string`	`"1rem"`	否	项目之间的间隙（CSS 值）
`style`	`object`	`{}`	否	附加内联样式

示例:

3 Columns
Code

Card 1

Content

Card 2

Content

Card 3

Content

<GridContainer columns={3} gap="2rem">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</GridContainer>

Spacer

垂直或水平间距组件。 导入:

import { Spacer } from "/snippets/components/primitives/layout.jsx";

属性:

属性	类型	默认值	必需	描述
`size`	`string`	`"1rem"`	否	间距大小 (CSS 值)
`direction`	`string`	`"vertical"`	无	间距方向: “vertical"	"horizontal”

示例:

Vertical Spacing
Code

Card 1

Content

Card 2

Content

<Card>Content 1</Card>
<Spacer size="2rem" />
<Card>Content 2</Card>

Tables

表格原始组件

用于结构化数据展示的表格组件，不使用内联样式。

StyledTable

带有主题感知功能的表格组件，支持变体。 导入：

import { StyledTable, TableRow, TableCell } from "/snippets/components/primitives/tables.jsx";

属性：

属性	类型	默认	必需	描述
`children`	`ReactNode`	-	是	表格内容（thead、tbody 等）
`variant`	`string`	`"default"`	否	表格变体：“default"	"bordered"	"minimal”
`style`	`object`	`{}`	否	附加内联样式

示例：

Default Table
Code

Name	Status
Item 1	Active
Item 2	Pending

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Header 1</TableCell>
      <TableCell header align="center">Header 2</TableCell>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <TableCell>Data 1</TableCell>
      <TableCell align="center">Data 2</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

TableRow 属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	表格单元格
`header`	`boolean`	`false`	否	这是标题行吗？
`hover`	`boolean`	`false`	否	启用悬停效果
`style`	`object`	`{}`	否	额外的内联样式

TableCell 属性:

属性	类型	默认	需要的	描述
`children`	`ReactNode`	-	是	单元格内容
`align`	`string`	`"left"`	否	文本对齐方式: “left"	"center"	"right”
`header`	`boolean`	`false`	否	这是标题单元格吗?
`style`	`object`	`{}`	否	额外的内联样式

Containers

容器原始组件

用于分组和组织内容的容器组件。

BorderedBox

具有主题感知功能的带边框容器组件。 导入：

import { BorderedBox } from "/snippets/components/primitives/containers.jsx";

属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	要显示的内容
`variant`	`string`	`"default"`	否	边框变体: “default"	"accent"	"muted”
`padding`	`string`	`"1rem"`	否	内部填充（CSS 值）
`borderRadius`	`string`	`"8px"`	否	边框半径 (CSS 值)
`style`	`object`	`{}`	无	额外的内联样式

示例:

Default
Accent Variant
Code

This is a bordered box with default styling.

<BorderedBox variant="accent" padding="1.5rem">
  Important content here
</BorderedBox>

CenteredContainer

居中内容容器组件。 导入:

import { CenteredContainer } from "/snippets/components/primitives/containers.jsx";

属性:

属性	类型	默认	必需	描述
`children`	`ReactNode`	-	是	要显示的内容
`maxWidth`	`string`	`"800px"`	否	最大宽度（CSS 值）
`padding`	`string`	`"0"`	否	内部填充（CSS 值）
`style`	`object`	`{}`	否	额外的内联样式

示例：

Centered Content
Code

Centered Card

This card is centered with a max width of 600px.

<CenteredContainer maxWidth="600px">
  Centered content here
</CenteredContainer>

FullWidthContainer

全宽突破容器组件，用于标题部分和全宽内容。 导入：

import { FullWidthContainer } from "/snippets/components/primitives/containers.jsx";

属性：

属性	类型	默认值	必需	描述
`children`	`ReactNode`	-	是	要显示的内容
`backgroundColor`	`string`	-	否	背景颜色（CSS 值或 CSS 变量）
`style`	`object`	`{}`	否	额外的内联样式

示例：

Full Width
Code

Full-width hero content

<FullWidthContainer backgroundColor="var(--accent)">
  Full-width hero content
</FullWidthContainer>

Next: Display Components

Continue to Display 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

​按钮 & 操作

​DownloadButton

​BasicBtn

​图标与品牌

​LivepeerIcon

​LivepeerIconFlipped

​LivepeerSVG

​LivepeerIconOld

​链接与导航

​GotoLink

​GotoCard

API Reference

Getting Started

​CustomCallout

​TipWithArrow

​LinkArrow

​文本与排版

​副标题

​复制文本

​CardTitleTextWithArrow

Card Title with Arrow

​AccordionTitleWithArrow

​分隔线

​自定义分隔线

​布局原语

​FlexContainer

Card 1

Card 2

Card 3

Item 1

Item 2

Centered

Centered

​GridContainer

Card 1

Card 2

Card 3

​Spacer

Card 1

Card 2

​表格原始组件

​StyledTable

​容器原始组件

​BorderedBox

​CenteredContainer

Centered Card

​FullWidthContainer

Next: Display Components

按钮 & 操作

DownloadButton

BasicBtn

图标与品牌

LivepeerIcon

LivepeerIconFlipped

LivepeerSVG

LivepeerIconOld

链接与导航

GotoLink

GotoCard

CustomCallout

TipWithArrow

LinkArrow

文本与排版

副标题

复制文本

CardTitleTextWithArrow

AccordionTitleWithArrow

分隔线

自定义分隔线

布局原语

FlexContainer

GridContainer

Spacer

表格原始组件

StyledTable

容器原始组件

BorderedBox

CenteredContainer

FullWidthContainer