@jdesignlab/popover v0.8.2

Popover

Popover 컴포넌트는 특정 요소 위에 표시 할 내용을 띄울 수 있습니다.

Usage

Storybook

export const PopoverExample = () => {
  const [isOpen, setPopoverOpen] = useState(false);
  return (
    <Popover
      open={isOpen}
      onOpen={() => {
        setPopoverOpen(true);
      }}
      onClose={() => {
        setPopoverOpen(false);
      }}
    >
      <Popover.Trigger>
        <Button color="blue-lighten2">Left Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Popover.Header>Confirm</Popover.Header>
        <Popover.Body>Popover Content</Popover.Body>
        <Popover.Footer>
          <Flex gap="8px" justify="flex-end" items="center">
            <Button
              size="sm"
              color="shades-white"
              onClick={e => {
                setPopoverOpen(false);
              }}
            >
              Cancel
            </Button>
            <Button size="sm" color="blue-lighten2">
              Apply
            </Button>
          </Flex>
        </Popover.Footer>
      </Popover.Content>
    </Popover>
  );
};

Props

Popover

Popover.Trigger