@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

Property	Modifiers	Type	Description
anchor		string	The HTML ID of the anchor element this region is positioned relative to
anchorElement		HTMLElement | null	The HTML element being used as the anchor
autoUpdateMode		AutoUpdateMode	Defines what triggers the anchored region to revaluate positioning
fixedPlacement		boolean	Whether 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,
horizontalDefaultPosition		HorizontalPosition	The default horizontal position of the region relative to the anchor element
horizontalInset		boolean	Whether the region overlaps the anchor on the horizontal axis
horizontalPosition		AnchoredRegionPositionLabel | undefined	indicates the current vertical position of the region
horizontalPositioningMode		AxisPositioningMode	Sets 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
horizontalScaling		AxisScalingMode	Defines how the width of the region is calculated
horizontalThreshold		number	How narrow the space allocated to the default position has to be before the widest area is selected for layout
horizontalViewportLock		boolean	Whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis
update		() => void	update position
verticalDefaultPosition		VerticalPosition	The default vertical position of the region relative to the anchor element
verticalInset		boolean	Whether the region overlaps the anchor on the vertical axis
verticalPosition		AnchoredRegionPositionLabel | undefined	indicates the current horizontal position of the region
verticalPositioningMode		AxisPositioningMode	Sets 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
verticalScaling		AxisScalingMode	Defines how the height of the region is calculated
verticalThreshold		number	How short the space allocated to the default position has to be before the tallest area is selected for layout
verticalViewportLock		boolean	Whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis
viewport		string	The HTML ID of the viewport element this region is positioned relative to
viewportElement		HTMLElement | null	The HTML element being used as the viewport