doc: add comparison mdx component (#2266)

galacean · Jul 25, 2024 · e6e90d6 · e6e90d6
1 parent d16d668
commit e6e90d6
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/docs/zh/how-to-contribute.mdx b/docs/zh/how-to-contribute.mdx
@@ -29,6 +29,12 @@ You could write some additional information in that place. You also could use ma
 
 ### Callout
 
+```mdx
+<Callout type="info">
+your text...
+</Callout>
+```
+
 Callout 组件与你在 markdown 中使用的引言语法 `> some text` 类似，不过它会以高亮块的方式来突出显示内容，从而更直观的传递一些信息。
 Callout 组件提供了四种类型: `info`，`warning`，`positive` 以及 `negative`，用来适配不同的是用场景。
 
@@ -56,6 +62,24 @@ Callout 组件提供了四种类型: `info`，`warning`，`positive` 以及 `neg
 注意，如果你没有把脚本资产绑定到实体的脚本组件上，则脚本不会运行
 </Callout>
 
+### Comparison
+
+```mdx
+<Comparison
+  leftSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*AxpMSqxO5-IAAAAAAAAAAAAADknZAQ/original"
+  leftText="offset: 15.3"
+  rightSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*-Q8FS7vQhkkAAAAAAAAAAAAADknZAQ/original"
+  rightText="offset: 20.4"
+/>
+```
+
+<Comparison
+  leftSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*AxpMSqxO5-IAAAAAAAAAAAAADknZAQ/original"
+  leftText="offset: 15.3"
+  rightSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*-Q8FS7vQhkkAAAAAAAAAAAAADknZAQ/original"
+  rightText="offset: 20.4"
+/>
+
 ### 图片缩放
 
 新版官网引入了 `react-medium-image-zoom` 来实现了图片点击放大的功能。你可以使用下面的方式来实现：