mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
baec55029d
* chore(root): menu and select components in progress * chore(root): merged with main * feat(menu): stories created * feat(dropdown): menu migrated to menu component * feat(select): base implementation in progress * feat(select): listbox implemented * feat(select): scroll overflow and auto scroll added * feat(select): colors & variants improved, inside placement complete, outside pending * feat(scroll-shadow): new component in progress * feat(select): scroll shadow integrated * fix(select): popover implementation, more scroll shadow stories added * feat(listbox): custom styles example added to stories * chore(listbox): overflow hidden removed * feat(select): variants and styles completed * chore(select): description story added * feat(select): more stories added * fix(select): dynamic collections inference, styles improved, more stories added * fix(select): auto scroll to selected item, scroll padding added * chore(select): scroll behavior changed to nearest * feat(select): custom item story added * fix(select): autoscroll fixed * feat(select): multi select support added * feat(select): more examples added, clean-package modified to remove dev packages * chore(modal): useImperativeHandle removed * feat(select): render value story improved * feat(docs): listbox & scroll shadow docs done * feat(docs): select documentation in progress * fix: select aria label (#1425) * feat(docs): more examples added * feat(docs): select multiple added, storybook favicon changed * fix: added value to aria label of select (#1431) * feat(select): more examples added, storybook favicon changed * fix(popover): dialog role removed * feat(select): api added, async loading exampled added * fix: fixed list box on click not working with sr click (#1439) * feat(select): async items loading support added and documented * feat(root): input styles updated to be as the select ones * chore(root): listbox and scroll shadow readme updated * feat(select): ts examples added, banner updated * fix(popover): voiceover closes when focusing an item fixed * chore(select): focus scope removed * fix(popover): free solo popover added to use without a trigger * feat(select): blog post added * chore(docs): search meta generated, multi controlled onchange example fixed * chore(root): changeset added --------- Co-authored-by: Jakob Guddas <github@jguddas.de>
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
return (
|
|
<Select
|
|
className="max-w-xs"
|
|
label="Select country"
|
|
>
|
|
<SelectItem
|
|
key="argentina"
|
|
startContent={<Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />}
|
|
>
|
|
Argentina
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="venezuela"
|
|
startContent={<Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />}
|
|
>
|
|
Venezuela
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="brazil"
|
|
startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
|
|
>
|
|
Brazil
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="switzerland"
|
|
startContent={
|
|
<Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
|
|
}
|
|
>
|
|
Switzerland
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="germany"
|
|
startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
|
|
>
|
|
Germany
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="spain"
|
|
startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
|
|
>
|
|
Spain
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="france"
|
|
startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
|
|
>
|
|
France
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="italy"
|
|
startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
|
|
>
|
|
Italy
|
|
</SelectItem>
|
|
<SelectItem
|
|
key="mexico"
|
|
startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
|
|
>
|
|
Mexico
|
|
</SelectItem>
|
|
</Select>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|