Dialog
Dialog is a small window that can be used to present information and user interface elements in an overlay.
const [opened, setOpened] = useState(true);
return (
<>
<Dialog
opened={opened}
onOpenedChanged={({ detail: { value } }) => setOpened(value)}
header={<h3 className="m-0">New employee</h3>}
footer={
<div className="flex gap-m">
<Button onClick={() => setOpened(false)}>Cancel</Button>
<Button onClick={() => setOpened(false)} theme="primary">
Add
</Button>
</div>
}
>
<VerticalLayout style={{ width: "18rem", alignItems: "stretch" }}>
<TextField label="First name" />
<TextField label="Last name" />
</VerticalLayout>
</Dialog>
<Button onClick={() => setOpened(!opened)}>Show dialog</Button>
</>
);
Important
| You can find more information in the corresponding article on vaadin.com. |