Copyimport { Menu } from 'native-base';
Playgroundfunction Example() {return <Menu trigger={triggerProps => {return <Pressable accessibilityLabel="More options menu" {...triggerProps}><HamburgerIcon /></Pressable>;}}><Menu.Item>Arial</Menu.Item><Menu.Item>Nunito Sans</Menu.Item><Menu.Item isDisabled>Tahoma</Menu.Item><Divider /><Menu.Item>Roboto</Menu.Item><Menu.Item>Montserrat</Menu.Item></Menu>;}
Playgroundfunction Example() {return <Menu closeOnSelect={false} onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {return <Pressable {...triggerProps}><HamburgerIcon /></Pressable>;}}><Menu.Group title="Profile"><Menu.Item>Menu item 1</Menu.Item><Menu.Item>Menu item 2</Menu.Item></Menu.Group><Divider borderColor="gray.300" /><Menu.Group title="Help"><Menu.Item isDisabled>Menu item 3</Menu.Item><Menu.Item>Menu item 4</Menu.Item></Menu.Group></Menu>;}
Playgroundfunction Example() {return <Menu onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {return <Pressable {...triggerProps}><HamburgerIcon /></Pressable>;}}><Menu.OptionGroup defaultValue="asc" title="Order" type="radio"><Menu.ItemOption value="asc">Ascending</Menu.ItemOption><Menu.ItemOption value="desc">Descending</Menu.ItemOption></Menu.OptionGroup><Divider /><Menu.OptionGroup title="Country" type="checkbox"><Menu.ItemOption value="email">Email</Menu.ItemOption><Menu.ItemOption value="country">Country</Menu.ItemOption></Menu.OptionGroup></Menu>;}
Playgroundfunction Example() {const [shouldOverlapWithTrigger] = React.useState(false);const [position, setPosition] = React.useState("auto");return <VStack space={6} alignSelf="flex-start" w="100%"><Menu shouldOverlapWithTrigger={shouldOverlapWithTrigger} // @ts-ignoreplacement={position == "auto" ? undefined : position} trigger={triggerProps => {return <Button alignSelf="center" variant="solid" {...triggerProps}>Menu</Button>;}}><Menu.Item>Large Menu item 1</Menu.Item><Menu.Item>Large Menu item 2</Menu.Item><Menu.Item>Large Menu item 3</Menu.Item></Menu><Select selectedValue={position} mx={{base: 0,md: "auto"}} onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{bg: "cyan.600",endIcon: <CheckIcon size={4} />}} accessibilityLabel="Select a position for Menu"><Select.Item label="auto" value="auto" /><Select.Item label="Top Left" value="top left" /><Select.Item label="Top" value="top" /><Select.Item label="Top Right" value="top right" /><Select.Item label="Right Top" value="right top" /><Select.Item label="Right" value="right" /><Select.Item label="Right Bottom" value="right bottom" /><Select.Item label="Bottom Left" value="bottom left" /><Select.Item label="Bottom" value="bottom" /><Select.Item label="Bottom Right" value="bottom right" /><Select.Item label="Left Top" value="left top" /><Select.Item label="Left" value="left" /><Select.Item label="Left Bottom" value="left bottom" /></Select></VStack>;}