mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
90 lines
4.1 KiB
TypeScript
90 lines
4.1 KiB
TypeScript
const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
const {isOpen, onOpen, onOpenChange} = useDisclosure();
|
|
const [scrollBehavior, setScrollBehavior] = React.useState("inside");
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<RadioGroup
|
|
label="Select scroll behavior"
|
|
orientation="horizontal"
|
|
value={scrollBehavior}
|
|
onValueChange={setScrollBehavior}
|
|
>
|
|
<Radio value="inside">inside</Radio>
|
|
<Radio value="outside">outside</Radio>
|
|
</RadioGroup>
|
|
<Button onPress={onOpen}>Open Modal</Button>
|
|
<Modal isOpen={isOpen} onOpenChange={onOpenChange} scrollBehavior={scrollBehavior}>
|
|
<ModalContent>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
|
|
<ModalBody>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
</p>
|
|
<p>
|
|
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
|
|
dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.
|
|
Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
|
|
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
|
|
proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
|
|
dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.
|
|
Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
|
|
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
|
|
proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
|
</p>
|
|
<p>
|
|
Mollit dolor eiusmod sunt ex incididunt cillum quis.
|
|
Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
|
|
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
|
|
proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
|
|
dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.
|
|
Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
|
|
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
|
|
proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
|
</p>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button color="danger" variant="light" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button color="primary" onPress={onClose}>
|
|
Action
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|