Positioning - HelixDesignSystem/helix-ui GitHub Wiki
TODO: Move "position" section to "Resources > Positioning" in component explorer docs
| Audience |
|---|
| Mixed |
Positioning is accomplished via calculating absolute x,y coordinates from a reference element (i.e. you position an element in relation to a reference element, rather than the page).
The positioning library has two functions that provide x,y coordinates.
getPosition(positionedElement, referenceElement, config)- applies no margin or offset
getPositionWithArrow(positionedElement, referenceElement, config)- applies predefined margin and offset values based on redline specifications
Configuration
Three options are available:
position
The position option defines the general location of the positioned element in relation to the relative element. The x,y coordinates of the positioned element can be fine tuned using the margin and offset options.
(starting from top left and going clockwise)
| Position | Location | Alignment |
|---|---|---|
top-start |
above and to the left | align left edges |
top-left |
above and to the left | align right edge with relative center |
top |
above centered | horizontally align centers |
top-right |
above and to the right | align left edge with relative center |
top-end |
above and to the right | align right edges |
right-start |
right and higher | align top edges |
right-top |
right and higher | align bottom edge with relative center |
right |
right centered | vertically align centers |
right-bottom |
right and lower | align top edge with relative center |
right-end |
right and lower | align bottom edges |
bottom-end |
below and to the right | align right edges |
bottom-right |
below and to the right | align left edge with relative center |
bottom |
below centered | horizontally align centers |
bottom-left |
below and to the left | align right edge with relative center |
bottom-start |
below and to the left | align left edges |
left-end |
left and lower | align bottom edges |
left-bottom |
left and lower | align top edge with relative center |
left |
left centered | vertically align centers |
left-top |
left and higher | align bottom edge with relative center |
left-start |
left and higher | align top edges |
Offset
Offset is the distance in pixels toward the main axis. Use this option to shift the positioned element along the cross-axis.
Margin
Margin is the space in pixels, along the main axis, between the reference element and the positioned element.