Skip to main content
Version: 1.x

@microsoft/fast-foundation > AnchoredRegion

AnchoredRegion class

An anchored region Custom HTML Element.

  • The default slot for the content

loaded - Fires a custom 'loaded' event when the region is loaded and visible

positionchange - Fires a custom 'positionchange' event when the position has changed

Signature:
export declare class AnchoredRegion extends FoundationElement 

Properties

PropertyModifiersTypeDescription
anchorstringThe HTML ID of the anchor element this region is positioned relative to
anchorElementHTMLElement | nullThe HTML element being used as the anchor
autoUpdateModeAutoUpdateModeDefines what triggers the anchored region to revaluate positioning
fixedPlacementbooleanWhether the region is positioned using css "position: fixed". Otherwise the region uses "position: absolute". Fixed placement allows the region to break out of parent containers,
horizontalDefaultPositionHorizontalPositionThe default horizontal position of the region relative to the anchor element
horizontalInsetbooleanWhether the region overlaps the anchor on the horizontal axis
horizontalPositionAnchoredRegionPositionLabel | undefinedindicates the current vertical position of the region
horizontalPositioningModeAxisPositioningModeSets what logic the component uses to determine horizontal placement. 'locktodefault' forces the default position 'dynamic' decides placement based on available space 'uncontrolled' does not control placement on the horizontal axis
horizontalScalingAxisScalingModeDefines how the width of the region is calculated
horizontalThresholdnumberHow narrow the space allocated to the default position has to be before the widest area is selected for layout
horizontalViewportLockbooleanWhether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis
update() => voidupdate position
verticalDefaultPositionVerticalPositionThe default vertical position of the region relative to the anchor element
verticalInsetbooleanWhether the region overlaps the anchor on the vertical axis
verticalPositionAnchoredRegionPositionLabel | undefinedindicates the current horizontal position of the region
verticalPositioningModeAxisPositioningModeSets what logic the component uses to determine vertical placement. 'locktodefault' forces the default position 'dynamic' decides placement based on available space 'uncontrolled' does not control placement on the vertical axis
verticalScalingAxisScalingModeDefines how the height of the region is calculated
verticalThresholdnumberHow short the space allocated to the default position has to be before the tallest area is selected for layout
verticalViewportLockbooleanWhether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis
viewportstringThe HTML ID of the viewport element this region is positioned relative to
viewportElementHTMLElement | nullThe HTML element being used as the viewport