lywsvip/engine
1
0
Fork 0
mirror of https://github.com/galacean/engine.git synced 2026-06-02 08:40:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: add comparison mdx component (#2266)

Browse Source
This commit is contained in:
Bo Kou
2024-07-25 12:57:51 +08:00
committed by GitHub
parent d16d668b90
commit e6e90d6fd2
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/zh/how-to-contribute.mdx
View File

@@ -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` 来实现了图片点击放大的功能。你可以使用下面的方式来实现：