flyout

v1.0.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

N/A

Generally the Flyout target and presenter

Install flyout as a package?

Copied

npm i @bit/autodesk-tool-evals.hig-components.flyout

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Generally the Flyout target and presenter

Amount of time between mouse enter is reported and when onMouseEnter event should fire

Function called when the user enters the visual space occupied by the component

Function called when the user leaves the visual space occupied by the component

When the flyout overflows the viewport, it’ll attempt to use the given anchor points in order to keep the flyout within the viewport.

If openOnHover is true, this prop will determine the delay from when mouseEnter begins until the flyout visually opens

Determines whether the given position is entirely within the viewport

Properties

Name	Type	Description
innerRef	`function (HTMLElement): void`
hideFlyout	`function (): void`
content	`JSX?`
handleScroll	`function (UIEvent): void?`
maxHeight	`number?`
actionRef	`HTMLElement?`
open	`boolean`	Used to direct the flyout’s transition behavior
panelRef	`HTMLElement?`
pointerRef	`SVGSVGElement?`
wrapperRef	`HTMLDivElement?`
anchorPoint	`string`
actionRect	`DOMRect`
panelRect	`DOMRect`
pointerRect	`DOMRect`
viewportRect	`DOMRect`
top	`number`
left	`number`
anchorPoint	`string`
containerPosition	`Position`
pointerPosition	`Position`