@leafygreen-ui/popover
LeafyGreen UI Kit Popover
Last updated 8 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/popover 
SYNC missed versions from official npm registry.

Popover

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/popover

NPM

npm install @leafygreen-ui/popover

Example

import Popover from '@leafygreen-ui/popover';

<button
  className={containerStyle}
  onClick={() => this.setState({ active: !this.state.active })}
>
  Popover
  <Popover
    align="bottom"
    justify="start"
    active={this.state.active}
    usePortal={true}
    spacing={10}
  >
    <div className={popoverStyle}>Popover content</div>
  </Popover>
</button>;

Output HTML

<button class="leafygreen-ui-79elbk">
  Popover
  <div class="leafygreen-ui-1hyfx7x"></div>
</button>

<div align="bottom" justify="start" class="leafygreen-ui-1t5dnko">
  <div class="leafygreen-ui-ii2v5b">Popover content</div>
</div>

Simple Use Case

The popover component will be automatically positioned relative to its nearest parent. If usePortal is set to false, then it will be positioned relative to its nearest ancestor with the CSS property: position: absolute | relative | fixed.

Properties

Prop Type Description Default
active boolean Determines whether the Popover is active or inactive false
align 'top' | 'bottom' | 'left' | 'right' | 'center-horizontal' | 'center-vertical' A string that determines the alignment of the popover relative to the refEl. 'bottom'
justify 'start' | 'middle' | 'end' | 'fit' A string that determines the justification of the popover relative to the refEl. Justification will be defined relative to the align prop 'start'
children node Content that will appear inside of the <Popver /> component
usePortal boolean Will position Popover's children relative to its parent without using a Portal, if usePortal is set to false. NOTE: The parent element should be CSS position relative, fixed, or absolute if using this option. true
spacing number Specifies the amount of spacing (in pixels) between the trigger element and the content element. 10
className string Classname to apply to popover-content container
adjustOnMutation boolean Should the Popover auto adjust its content when the DOM changes (using MutationObserver). false
onClick function Function that will be called when popover content is clicked.
... native attributes of Portal or Fragment Any other properties will be spread on the popover-content container

Advanced Use Case

Prop Type Description Default
refEl HTMLElement You can supply a refEl prop, if you do not want the popover to be positioned relative to it's nearest parent. Ref to the element to which the popover component should be positioned relative to. null

Current Tags

  • 7.1.1                                ...           latest (8 days ago)

33 Versions

  • 7.1.1                                ...           8 days ago
  • 7.1.0                                ...           2 months ago
  • 7.0.1                                ...           3 months ago
  • 7.0.0                                ...           3 months ago
  • 6.0.0                                ...           4 months ago
  • 5.2.3                                ...           4 months ago
  • 5.2.2                                ...           5 months ago
  • 5.2.1                                ...           5 months ago
  • 5.2.0                                ...           5 months ago
  • 5.1.4                                ...           5 months ago
  • 5.1.3                                ...           5 months ago
  • 5.1.2                                ...           6 months ago
  • 5.1.1                                ...           6 months ago
  • 5.1.0                                ...           7 months ago
  • 5.0.2                                ...           8 months ago
  • 5.0.1                                ...           9 months ago
  • 5.0.0                                ...           9 months ago
  • 4.0.1                                ...           9 months ago
  • 4.0.0                                ...           10 months ago
  • 3.0.2                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 10
Last Day 0
Last Week 10
Last Month 33
Dependencies (5)
Dev Dependencies (1)

Copyright 2014 - 2017 © taobao.org |