文档
API
文档
API

创建预览区

KitBox

  • width
    • Type: number
    • Required: true
    • Description: 预览区的宽度，单位为像素。
  • height
    • Type: number
    • Required: true
    • Description: 预览区的高度，单位为像素。
  • onCurrentDataChange
    • Type: (e: CustomEvent<CardData>) => void
    • Required: false
    • Description: 当当前卡片数据发生变化时触发的事件，返回一个CustomEvent<CardData>对象，包含当前卡片数据。

示例

注意

需要自己定义<div className="box">的样式，设置宽高和边框等样式。

预览区域会根据box的宽高和传入的width height自动调整。

import { KitBox } from 'poster-kit/dist/react/components.ts'
import type { CardData } from 'poster-kit'
import { useRef, type ComponentRef } from 'react'

const App = () => {
  const kitBoxRef = useRef<ComponentRef<typeof KitBox> | null>(null)

  function currentDataChange(data: CardData) {
    console.log('当前数据:', data)
  }

  return <div className="box">
    <KitBox
      ref={kitBoxRef}
      width={1080}
      height={1920}
      onCurrentDataChange={(e) => currentDataChange(e.detail)}
    />
  </div>
}
ON THIS PAGE