MDX 组件参考

本页作为 Lynx 文档中可用自定义组件的参考。您可以从 @lynx 导入这些组件。

标注与警告 (Callout & Alerts)

用于突出显示重要信息。您可以使用标准 Markdown 语法 :::type 来创建标注。

:::info
这是一个信息标注。
:::

:::warning
这是一个警告标注。
:::

:::tip
这是一个提示标注。
:::

:::danger
这是一个危险标注。
:::

Info

这是一个信息标注。

Warning

这是一个警告标注。

Tip

这是一个提示标注。

Danger

这是一个危险标注。

徽章 (Badges)

平台徽章 (Platform Badges)

指示平台支持情况。

<AndroidOnly />
<IOSOnly />
<WebOnly />
<HarmonyOnly />

Android

iOS

Web

Harmony

状态徽章 (Status Badges)

指示 API 或功能状态。

<Deprecated />
<Experimental />
<Required />

DeprecatedExperimentalRequired

运行时徽章 (Runtime Badges)

指示脚本在哪个线程上运行。

<RuntimeBadge type="mts" />
<RuntimeBadge type="bts" />

MTS Only BTS Only

版本徽章 (Version Badge)

指示引入某个功能的 Lynx 版本。

<VersionBadge v={2.5} />
<VersionBadge>2.5.1</VersionBadge>

2.5

2.5.1

通用徽章 (Generic Badges)

标准 Rspress 徽章。

<Badge type="tip" text="Recommended" />
<Badge type="warning" text="Deprecated" />

RecommendedDeprecated

布局与容器 (Layout & Containers)

平台选项卡 (Platform Tabs)

按平台组织内容。

<PlatformTabs defaultPlatform="ios" queryKey="platform">
  <PlatformTabs.Tab platform="ios">iOS 内容</PlatformTabs.Tab>
  <PlatformTabs.Tab platform="android">Android 内容</PlatformTabs.Tab>
</PlatformTabs>

iOS

Android

iOS 内容

列 (Columns)

将内容分为多列。传递 titles 属性以设置列标题。

<Columns titles={['左列', '右列']}>
  <div>左列内容。</div>
  <div>右列内容。</div>
</Columns>

左列

左列内容。

右列

右列内容。

响应式双列 (Responsive Dual Column)

一种在小屏幕上切换为单列的布局。使用 FlexItem 控制宽度。

<ResponsiveDualColumn>
  <FlexItem minWidth={300}>
    <div>左侧内容 (min 300px)</div>
  </FlexItem>
  <FlexItem minWidth={300}>
    <div>右侧内容 (min 300px)</div>
  </FlexItem>
</ResponsiveDualColumn>

左侧内容 (min 300px)

右侧内容 (min 300px)

浏览器容器 (Browser Container)

将内容包装在类浏览器窗口框架中。

<BrowserContainer>
  <div style={{ padding: '20px', textAlign: 'center' }}>浏览器内容</div>
</BrowserContainer>

浏览器内容

代码折叠 (CodeFold)

可折叠的代码块，可选择包含图像。

<CodeFold toggle>```ts console.log('隐藏代码'); ```</CodeFold>

console.log('隐藏代码');

媒体与嵌入 (Media & Embeds)

YouTube

<YouTubeIframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" />

显示带有标题的视频列表。

<VideoList
  videos={[
    {
      src: 'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/ifr_fib.mp4',
      title: '演示视频',
    },
  ]}
  playbackRate={1.0}
/>

演示视频

Mermaid 图表 (Mermaid Diagrams)

<Mermaid>
  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
</Mermaid>

复杂组件 (Complex Components)

有关 <BlogList> 和 <BlogAvatar> 的详细信息，请参阅编写博客文章。

<BlogList />
<BlogAvatar list={['lynx']} />

交互式示例 (Interactive Example)

有关 <Go> 的详细信息，请参阅管理交互式示例。

<Go example="view" defaultFile="src/App.tsx" />

API 表格 (API Tables)

有关 <APITable> 和 <APISummary> 的详细信息，请参阅记录 API。

<APITable query="lynx-api/global/fetch" />

文档实用工具 (Documentation Utilities)

编辑此页 (Edit This)

渲染“编辑源文件”和“在云 IDE 中编辑”链接。

<EditThis />

查看源文件

版本表 (Version Table)

渲染 Lynx 版本表。

<VersionTable type="latest" />

版本号	release	文档仓库分支	文档链接	发布博客
3.7	---	release/3.7	https://lynxjs.org/3.7	---

#MDX 组件参考

#标注与警告 (Callout & Alerts)

#徽章 (Badges)

#平台徽章 (Platform Badges)

#状态徽章 (Status Badges)

#运行时徽章 (Runtime Badges)

#版本徽章 (Version Badge)

#通用徽章 (Generic Badges)

#布局与容器 (Layout & Containers)

#平台选项卡 (Platform Tabs)

#列 (Columns)

#响应式双列 (Responsive Dual Column)

#浏览器容器 (Browser Container)

#代码折叠 (CodeFold)

#媒体与嵌入 (Media & Embeds)

#YouTube

#视频列表 (Video List)

#Mermaid 图表 (Mermaid Diagrams)

#复杂组件 (Complex Components)

#博客与社交 (Blog & Social)

#交互式示例 (Interactive Example)

#API 表格 (API Tables)

#文档实用工具 (Documentation Utilities)

#编辑此页 (Edit This)

#版本表 (Version Table)