ProDrawer 扩展抽屉

TIP

• 扩展和增强 Shineout Drawer

基本使用

自带取消和确认按钮，提交触发的异步方法自动显示 loading，且不可取消或者关闭，持续到响应结束

tsx

import { useState } from 'react'
import { Button } from 'shineout'
import { ProDrawer } from '@lite-code/pro-shineout'

const sleep = async () => {
  await new Promise((res) => setTimeout(res, 2000))
}

export default () => {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          setOpen(true)
        }}
      >
        打开
      </Button>
      <ProDrawer
        title="ProDrawer"
        visible={open}
        width={400}
        onOk={async () => {
          await sleep()
        }}
        onClose={() => {
          setOpen(false)
        }}
      >
        ProDrawer 基本使用
      </ProDrawer>
    </>
  )
}

API

ProDrawerProps 继承 DrawerProps 额外的属性描述

属性名	描述	类型	默认值	是否必需
onOk	确定事件	() => void	无	否
cancelText	取消文案	string	无	否
okText	确定文案	string	无	否