TemplateDialog 模版对话框

一个模版对话框组件，用于模版对话框。

前置条件

在react项目入口文件中引入样式，默认为src/main.tsx。

import 'ono-react-element/dist/style/Pagination.css'

基础用法

import { useState } from'react'
import { Button, TemplateDialog } from 'ono-react-element'

function MyDialog({ destroy }: { destroy: () => void }) {
  return (
    <TemplateDialog
      dialogClose={destroy}
      style={{
        width: 500,
        height: 300,
        background: 'white',
        border: '1px solid #333',
        borderRadius: 4,
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <h1>This is my dialog</h1>
      <Button
        style={{ position: 'absolute', right: 16, bottom: 16 }}
        onClick={destroy}
      >
        Close
      </Button>
    </TemplateDialog>
  )
}

function App() {
  const [openDialog, setOpenDialog] = useState(false)

  return (
    <div style={{ width: '500px' }}>
      {openDialog && <MyDialog destroy={() => setOpenDialog(false)} />}
      <Button onClick={() => setOpenDialog(true)}>打开弹出</Button>
    </div>
  )
}

export default App;

结合PortalRenderer用法

import { useState } from'react'
import { Button, PortalRenderer, TemplateDialog } from 'ono-react-element'

function MyDialog({ destroy }: { destroy: () => void }) {
  return (
    <TemplateDialog
      dialogClose={destroy}
      style={{
        width: 500,
        height: 300,
        background: 'white',
        border: '1px solid #333',
        borderRadius: 4,
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <h1>This is my dialog</h1>
      <Button
        style={{ position: 'absolute', right: 16, bottom: 16 }}
        onClick={destroy}
      >
        Close
      </Button>
    </TemplateDialog>
  )
}

function App() {
  return (
    <div style={{ width: '500px' }}>
      <Button onClick={() => portalRenderer(MyDialog, {}, 'my-dialog')}>
        Open My Dialog
      </Button>
    </div>
  )
}

export default App;

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
children	弹窗内容	ReactNode|(enhancedDialogClose: () => void) => ReactNode	-	是
animation	动画类型	{ type: 'zoom'; element: HTMLElement }|{ type: 'fade'; direction?: 'top-center' | 'left-center'; startPosition: string }	-	否
duration	动画持续时间	number	300	否
className	自定义样式类名	string	-	否
style	自定义样式	CSSProperties	-	否
maskColor	遮罩颜色	string	'rgba(0, 0, 0, 0.5)'	否
disableContextMenu	禁用右键菜单	boolean	false	否
maskClickClose	点击遮罩关闭	boolean	true	否
dialogClose	点击对话框关闭	() => void	-	是