@chakra-ui/react#InputRightAddon TypeScript Examples
The following examples show how to use
@chakra-ui/react#InputRightAddon.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: InputRightAddonPreview.tsx From openchakra with MIT License | 6 votes |
|
InputRightAddonPreview: React.FC<{ component: IComponent }> = ({
component,
}) => {
const { props, ref } = useInteractive(component)
const boxProps: any = {}
return (
<Box {...boxProps} ref={ref}>
<InputRightAddon {...props} />
</Box>
)
}
Example #2
| Source File: index.tsx From engine with MIT License | 4 votes |
|
Header = () => (
<AccordionItem>
<Heading>
<AccordionButton _expanded={{ bg: "gray.300", color: "white" }}>
<Box flex="1" textAlign="left">
Header
</Box>
<AccordionIcon />
</AccordionButton>
</Heading>
<AccordionPanel pb={4}>
<HStack mb="3">
<Box w="70%">
Fill values from a past runtime call, a unit test or auto determine
values based on observe and update dependencies
</Box>
<Box w="30%">
<Button size="sm" mr="3" mb="2" color="teal">
Auto
</Button>
<Popover>
<PopoverTrigger>
<Button size="sm" mr="3" mb="2" color="purple">
From call
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>Runtime call history (5)</PopoverHeader>
<PopoverCloseButton />
<PopoverBody>
<OrderedList>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:15:10.123
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:13:2.130
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:12:41.500
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 13:21:20.341
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 12:40:19.983
</ListItem>
</OrderedList>
</PopoverBody>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>
<Button size="sm" color="blue">
From test
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>Tests (100% coverage)</PopoverHeader>
<PopoverCloseButton />
<PopoverBody>
<OrderedList>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should ensure guards work (30% coverage)
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should do computation when y is less (70% coverage)
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should reject if y is greater than (64% coverage)
</ListItem>
</OrderedList>
</PopoverBody>
</PopoverContent>
</Popover>
</Box>
</HStack>
<Divider mb="4" />
<Box mb="4">
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="pie" w="32" />
<Input defaultValue="3.14" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="http" w="32" />
<Input defaultValue={`axios from "axios"`} />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="[mock]" bg="black.100" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="operation" w="32" />
<Input defaultValue="prop.operation" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="sum" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="foo" w="32" />
<Input defaultValue="observe.foo.value" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="123" bg="teal.800" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="bam" w="32" />
<Input defaultValue="observe.bar.internal.something" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="321" bg="teal.800" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="updateSome" w="32" />
<Input defaultValue="update.a.value.somewhere" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="444" bg="yellow.700" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="" w="32" />
<Input placeholder="enter something..." />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input placeholder="sample value" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
</Box>
<HStack>
<Text w="70%" size="sm">
Last run took 14ms
</Text>
<ButtonGroup variant="outline" spacing="4">
<Button size="sm" colorScheme="black">
Save as test
</Button>
<Button size="sm" colorScheme="green" variant="solid">
Run
</Button>
</ButtonGroup>
</HStack>
</AccordionPanel>
</AccordionItem>
)
