Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 5x 5x 1x 1x 5x | import React, { Fragment, useState } from "react"; import { Modal } from "@tencent/tea-component/lib/modal"; import { Button } from "@tencent/tea-component/lib/button"; export default function ModalSizeExample() { const [visible, setVisible] = useState({ s: false, m: false, l: false, xl: false, auto: false, }); const open = size => () => setVisible(visible => ({ ...visible, [size]: true })); const close = size => () => setVisible(visible => ({ ...visible, [size]: false })); const names = { s: "小号", m: "中号", l: "大号", xl: "超大号", auto: "自动适应", }; return Object.entries(names).map(([size, name]) => ( <Fragment key={size}> <Button onClick={open(size)} style={{ marginRight: 5 }}> {name} ({size}) </Button> <Modal visible={visible[size]} // @ts-ignore size={size} caption={`${name}对话框`} onClose={close(size)} > <Modal.Body> {name} - {size.toUpperCase()} </Modal.Body> </Modal> </Fragment> )); } |