nz-flyout — Live Tests

Controls

Currently set:  Click

When a flyout is active try scrolling the page to see the flyout staying aligned with its anchor

Click — flyout examples

Cournered Up Left
On your left
align-my="bottom right"
align-to="top left"
Cournered Up Right
On your right
align-my="bottom left"
align-to="top right"
Cournered Down Right
On your left
align-my="top right"
align-to="bottom left"
Cournered Down Left
On your right
align-my="top left"
align-to="bottom right"
Left side top aligned
On your left
align-my="top right"
align-to="top left"
Right side top aligned
On your right
align-my="top left"
align-to="top right"
Left side center aligned
On your right
align-my="center right"
align-to="center left"
Right side center aligned
On your left
align-my="center left"
align-to="center right"
Left side bottom aligned
On your left
align-my="bottom right"
align-to="bottom left"
Right side bottom aligned
On your right
align-my="bottom left"
align-to="bottom right"
Top side right aligned
On your left
align-my="bottom right"
align-to="top right"
Top side left aligned
On your right
align-my="bottom left"
align-to="top left"
Bottom side right aligned
On your left
align-my="top right"
align-to="bottom right"
Bottom side left aligned
On your right
align-my="top left"
align-to="bottom left"
Zig
Above you
align-my="bottom center"
align-to="top center"
Zag
Below you
align-my="top center"
align-to="bottom center"

flyout examples using margins on the flyout content to add space between the flyout and its anchor

Horizontal Margins
margin: 0 40px;
align-my="center right"
align-to="center left"
Vertical Margins
margin: 40px 0;
align-my="top center"
align-to="bottom center"
Full Margins
angled flyout
margin: 20px;
align-my="top right"
align-to="bottom left"

Multiple Flyouts sharing the same anchor on a higher level parent

Blue
Green
Blueviolet