mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
|
|
|
|
const selectedValue = React.useMemo(
|
|
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
|
|
[selectedKeys]
|
|
);
|
|
|
|
return (
|
|
<Dropdown>
|
|
<DropdownTrigger>
|
|
<Button
|
|
variant="bordered"
|
|
className="capitalize"
|
|
>
|
|
{selectedValue}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
<DropdownMenu
|
|
aria-label="Single selection actions"
|
|
variant="flat"
|
|
closeOnSelect={false}
|
|
disallowEmptySelection
|
|
selectionMode="multiple"
|
|
selectedKeys={selectedKeys}
|
|
onSelectionChange={setSelectedKeys}
|
|
>
|
|
<DropdownItem key="text">Text</DropdownItem>
|
|
<DropdownItem key="number">Number</DropdownItem>
|
|
<DropdownItem key="date">Date</DropdownItem>
|
|
<DropdownItem key="single_date">Single Date</DropdownItem>
|
|
<DropdownItem key="iteration">Iteration</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|