Popover

ナビゲーションを開く

Prop	Type	Default
`children?`	`ReactNode`	-
`closeOnClickAway?`	`boolean`	`true`
`defaultOpen?`	`boolean`	`false`
`flipDisabled?`	`boolean`	`false`
`isOpen?`	`boolean`	-
`onChange?`	`(isOpen: boolean) => void`	-
`placement?`	`Placement`	`'bottom-start'`
`role?`	`'dialog'`

Prop	Type	Default
`renderItem`	`(props: PopoverTriggerProps) => ReactElement`	-

renderItem: Type: (props: PopoverContentProps) => ReactElement; Default: -
animation?: Type: 'scale'|'fade'; Default: 'scale'

Prop	Type	Default
`renderItem`	`(props: PopoverContentProps) => ReactElement`	-
`animation?`	`'scale'`\|`'fade'`	`'scale'`

<Popover.Root>
  <Popover.Trigger
    renderItem={(props) => (
      <Button {...props} type="button">
        Open Popover
      </Button>
    )}
  />
  <Popover.Content
    renderItem={(props) => (
      <div
        className="rounded-lg bg-bg-raised p-4 shadow-md"
        {...props}
      >
        <p>Popover content goes here.</p>
      </div>
    )}
  />
</Popover.Root>

<Popover.Root placement="top">
  <Popover.Trigger
    renderItem={(props) => (
      <Button {...props} type="button">Top</Button>
    )}
  />
  <Popover.Content
    renderItem={(props) => (
      <div className="rounded-lg bg-bg-raised p-4 shadow-md" {...props}>
        <p>Top placement</p>
      </div>
    )}
  />
</Popover.Root>

<Popover.Root placement="right">
  <Popover.Trigger
    renderItem={(props) => (
      <Button {...props} type="button">Right</Button>
    )}
  />
  <Popover.Content
    renderItem={(props) => (
      <div className="rounded-lg bg-bg-raised p-4 shadow-md" {...props}>
        <p>Right placement</p>
      </div>
    )}
  />
</Popover.Root>

<Popover.Root placement="bottom">
  <Popover.Trigger
    renderItem={(props) => (
      <Button {...props} type="button">Bottom</Button>
    )}
  />
  <Popover.Content
    renderItem={(props) => (
      <div className="rounded-lg bg-bg-raised p-4 shadow-md" {...props}>
        <p>Bottom placement</p>
      </div>
    )}
  />
</Popover.Root>

<Popover.Root placement="left">
  <Popover.Trigger
    renderItem={(props) => (
      <Button {...props} type="button">Left</Button>
    )}
  />
  <Popover.Content
    renderItem={(props) => (
      <div className="rounded-lg bg-bg-raised p-4 shadow-md" {...props}>
        <p>Left placement</p>
      </div>
    )}
  />
</Popover.Root>

インポート

使い方

配置

Props

Popover.Root

Popover

インポート

使い方

配置

Props

Popover.Root

Popover.Trigger

Popover.Content