API

Name	Desc	Type	Default	Vue Only	React Only
renderIntro	介绍区渲染函数	() => Element			true
renderDemo	展示区渲染函数	() => Element			true
intro	介绍区插槽	Slot		true
demo	展示区插槽	Slot		true

Usage

Markdown

需要使用 YTUI 的定制主题 vitepress-theme-ytui 才有效。

最简用法：

默认文字区

自定义展示区和文字区：

• 展示区可使用 design-decode-demo。
• 注意此时 design-decode 要用 :::: 四个冒号。

此处是展示区

默认文字区

Markdown

最简用法：

::: design-decode
默认文字区
:::

自定义展示区和文字区：
- 展示区可使用 `design-decode-demo`。
- 注意此时 design-decode 要用 `::::` 四个冒号。

:::: design-decode
::: design-decode-demo
此处是展示区
:::
默认文字区
::::

Vue SFC

展示区

描述区

Vue SFC

<script setup>
import { DesignDecode } from 'ytui'
</script>
<template>
  <div>
    <DesignDecode>
      <template #intro>描述区</template>
      <template #demo>展示区</template>
    </DesignDecode>
  </div>
</template>

JSX

展示区

文字区

JSX

import { DesignDecode } from "ytui"

export default function () {
  return (
    <DesignDecode
      layout="x"
      introPosition="right"
      renderIntro={() => "文字区"}
      renderDemo={() => "展示区"}
    ></DesignDecode>
  )
}