Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@leafygreen-ui/popover
Advanced tools
import Popover from '@leafygreen-ui/popover';
<button
className={containerStyle}
onClick={() => this.setState({ active: !this.state.active })}
>
Popover
<Popover
align={select('Align', ['top', 'bottom', 'left', 'right'], 'bottom')}
justify={select('justify', ['start', 'middle', 'end'], 'start')}
active={this.state.active}
usePortal={boolean('usePortal', true)}
spacing={number('spacing', 10)}
>
<div className={popoverStyle}>Popover content</div>
</Popover>
</button>;
<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>
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
.
Type: boolean
Default: false
Determines whether the Popover is active or inactive
Type: string
Default: bottom
A string that determines the aligment of the popover relative to the refEl
. There are four options: top
, bottom
, left
, or right
Type: string
Default: left
A string that determines the justification of the popover relative to the refEl
. There are three options start
, middle
, and end
, which will be defined relative to the align
prop
Type: node
Default: null
Content that will appear inside of the Popver component
Type: boolean
Default: true
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.
Type: number
Default: 10
Specifies the amount of spacing (in pixels) between the trigger element and the content element.
Type: string
Default: ''
Classname to apply to popover-content container
Type: boolean
Default: 'false'
Should the Popover auto adjust its content when the DOM changes (using MutationObserver).
Type: object
Default: null
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.
FAQs
LeafyGreen UI Kit Popover
The npm package @leafygreen-ui/popover receives a total of 28,660 weekly downloads. As such, @leafygreen-ui/popover popularity was classified as popular.
We found that @leafygreen-ui/popover demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.