slidev-addon-infographic

KO | EN

gitlite — search

#python #react #typescript #llm #golang #android #linux #nodejs #macos #java #awesome #kubernetes #mcp #openai

slidev-addon-infographic

(★ 9)

@antv/infographic component for slidev

slidev-addon-infographic Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# slidev-addon-infographic

[@antv/infographic](https://infographic.antv.vision/) component for slidev

![theme-light](https://raw.githubusercontent.com/fxss5201/slidev-addon-infographic/main/assets/theme-light.png)
![theme-dark](https://raw.githubusercontent.com/fxss5201/slidev-addon-infographic/main/assets/theme-dark.png)
![slide-overview](https://raw.githubusercontent.com/fxss5201/slidev-addon-infographic/main/assets/slide-overview.png)
![slides-overview](https://raw.githubusercontent.com/fxss5201/slidev-addon-infographic/main/assets/slides-overview.png)

## Usage Process

``` sh
pnpm i slidev-addon-infographic --save
```

Add the following to your `package.json`:

``` json
...
  "slidev": {
    "addons": [
      "slidev-addon-infographic"
    ]
  }
...
```

Add the following to your `slides.md`:

### v1.1.0+

Starting from v1.1.0, the `InfographicBox` component has been added (which internally includes the `RenderWhen` component) for displaying infographics in slides.

从 v1.1.0 开始，新增了 `InfographicBox` 组件（内部包含 `RenderWhen` 组件），用于在幻灯片中显示信息图。

``` md
---
addons:
  - slidev-addon-infographic
---

<InfographicBox
  :data="`infographic list-row-simple-horizontal-arrow
data
  items
    - label 步骤 1
      desc 开始
    - label 步骤 2
      desc 进行中
    - label 步骤 3
      desc 完成
`"></InfographicBox>
```

- **To export in PDF format, add the `isExportPdf` property to the `InfographicBox` component. When exporting, `click` will be set to `false` by default.**

1. **如需导出 PDF 格式，请为 `InfographicBox` 组件增加 `isExportPdf` 属性，导出的时候会默认将 `click` 设置为 `false`。**

### v1.0.0+

``` md
---
addons:
  - slidev-addon-infographic
---

<RenderWhen
  :context="['visible', 'print', 'slide', 'overview', 'presenter', 'previewNext']"
  style="height: 100%;">
  <Infographic
    :data="`infographic list-row-simple-horizontal-arrow
data
  items
    - label 步骤 1
      desc 开始
    - label 步骤 2
      desc 进行中
    - label 步骤 3
      desc 完成
    `"></Infographic>
</RenderWhen>
```

[RenderWhen](https://sli.dev/builtin/components#renderwhen)

- **Infographic component must be used with RenderWhen component to show infographic in slidev.**
- **If you want to export PDF format, please remove `visible` in `RenderWhen` component's `context` attribute.**

1. **Infographic组件必须与RenderWhen组件一起使用，才能在幻灯片中显示信息图。**
2. **如需导出 PDF 格式，请将 `RenderWhen` 组件的 `context` 属性中的 `visible` 去除。**

## Parameter Description

| Parameter | Description | Type | Default | Version |
| --------- | ----------- | ---- | ------- | ------- |
| data | Infographic data | string | - | 1.0.0 |
| click | Whether to respond to [Slidev click animation](https://sli.dev/guide/animations#click-animation), If set to `true`, you need to add a [`clicks`](https://sli.dev/guide/animations#total) field in the `frontmatter` with the value being the number of clicks. | boolean | false | 1.0.4 |
| isExportPdf | Whether to export in PDF format. When exporting, `click` will be set to `false` by default. | boolean | false | 1.1.0 |

- **Note: `click` is primarily used for demonstrating effects, and it is recommended to turn it off when exporting.**
- **Note: When `click` is `true`, it needs to occupy a separate page.**
- **Note: After setting `click` to `true` and adding the `clicks` count, you need to click yourself to confirm the effect.**

| 参数 | 描述 | 类型 | 默认值 | 版本 |
| ---- | ---- | ---- | ------ | ---- |
| data | 信息图数据 | string | - | 1.0.0 |
| click | 是否响应[Slidev点击动画](https://cn.sli.dev/guide/animations#click-animation)，如果设置为 `true`，需要在 `frontmatter` 中添加 [`clicks`](https://cn.sli.dev/guide/animations#total) 字段，值为点击次数。 | boolean | false | 1.0.4 |
| isExportPdf | 是否导出 PDF 格式。导出时会默认将 `click` 设置为 `false`。 | boolean | false | 1.1.0 |

1. **注意：`click` 主要用于演示效果，导出时建议关闭。**
2. **注意：`click` 为 `true` 时，需要单独占一页。**
3. **注意：设置 `click` 为 `true` 后，并添加 `clicks` 点击次数之后的效果需要自行点击确认。**

## Example

[Example](https://github.com/fxss5201/slidev-addon-infographic/blob/main/slides.md?plain=1)

## Slidev

Edit the [slides.md](./slides.md) to see the changes.

Learn more about Slidev at the [documentation](https://sli.dev/).

slidev-addon-infographic

slidev-addon-infographic Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

slidev-addon-infographic

slidev-addon-infographic Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README