mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
a2133009f7
* fix: onSelectionChange type for dynamic items in Select component * docs: remove unnecessary properties * docs: update highlightedLines * chore: add changeset
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
const data = `export const animals = [
|
|
{key: "cat", label: "Cat"},
|
|
{key: "dog", label: "Dog"},
|
|
{key: "elephant", label: "Elephant"},
|
|
{key: "lion", label: "Lion"},
|
|
{key: "tiger", label: "Tiger"},
|
|
{key: "giraffe", label: "Giraffe"},
|
|
{key: "dolphin", label: "Dolphin"},
|
|
{key: "penguin", label: "Penguin"},
|
|
{key: "zebra", label: "Zebra"},
|
|
{key: "shark", label: "Shark"},
|
|
{key: "whale", label: "Whale"},
|
|
{key: "otter", label: "Otter"},
|
|
{key: "crocodile", label: "Crocodile"}
|
|
];`;
|
|
|
|
const SelectorIcon = `export const SelectorIcon = (props) => (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="1em"
|
|
role="presentation"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
{...props}
|
|
>
|
|
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
|
|
<path d="M8 9l4 -4l4 4" />
|
|
<path d="M16 15l-4 4l-4 -4" />
|
|
</svg>
|
|
);`;
|
|
|
|
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
|
import {SelectorIcon} from "./SelectorIcon";
|
|
import {animals} from "./data";
|
|
|
|
export default function App() {
|
|
return (
|
|
<Select
|
|
label="Favorite Animal"
|
|
placeholder="Select an animal"
|
|
labelPlacement="outside"
|
|
className="max-w-xs"
|
|
disableSelectorIconRotation
|
|
selectorIcon={<SelectorIcon />}
|
|
>
|
|
{animals.map((animal) => (
|
|
<SelectItem key={animal.key}>
|
|
{animal.label}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/data.js": data,
|
|
"/SelectorIcon.jsx": SelectorIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|