@datalk/sdk

缩略图、预览设置

缩略图

<p>默认宽高 232 / 130.5</p>
<Thumb data={template} />
<br />

<p>只设宽度 100</p>
<Thumb data={template} width={100} />
<br />

<p>只设高度 100</p>
<Thumb data={template} height={100} />
<br />

<p>contain效果: 宽高 300 / 100</p>
<Thumb data={template} width={300} height={100} style={{backgroundColor: '#fff'}} />
<br />

<p>contain效果: 宽高 100 / 300</p>
<Thumb data={template} width={100} height={300} style={{backgroundColor: '#6a7eeb'}} />

预览

<Modal.Confirm
    title="模板预览"
    wrapperClassName="preview-modal"
    onOk={() => setShow(false)}
    onCancel={() => setShow(false)}
    show={show}
    header={modalHeader()}
    bodyStyle={{width: 840}}
>
    <Preview data={template} style={{height: 400}} /> // 1. 高度应指定，否则按照100%滚动。2. 不设宽度，自适应父级宽度
</Modal.Confirm>