Skip to main content
Version: 1.x

fast-anchored-region

An anchored region is a container component which enables authors to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element. Additionally, the anchored region can react to the available space between the anchor and a parent "viewport" element such that the region is placed on the side of the anchor with the most available space, or even resize itself based on that space.

Setup

import {
provideFASTDesignSystem,
fastAnchoredRegion
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastAnchoredRegion()
);

Usage

A region that always renders above the anchor element.

Live Editor
<div id="viewport">
    <button id="anchor">
        Button is an anchor
    </button>
    <fast-anchored-region
        anchor="anchor"
        vertical-positioning-mode="locktodefault"
        vertical-default-position="top">
      This shows up above the button
    </fast-anchored-region>
</div>
Result
Loading...

Create your own design

import {
AnchoredRegion,
anchoredRegionTemplate as template,
} from "@microsoft/fast-foundation";
import { anchoredRegionStyles as styles } from "./my-anchored-region.styles";

export const myAnchoredRegion = AnchoredRegion.compose({
baseName: "anchored-region",
template,
styles,
});

API

Variables

NameDescriptionType
FlyoutPosTopA region that always places itself above the anchor, has a width to match the anchor, and is sized vertically by contentAnchoredRegionConfig
FlyoutPosBottomA region that always places itself below the anchor, has a width to match the anchor, and is sized vertically by contentAnchoredRegionConfig
FlyoutPosTallestA region that places itself above or below the anchor based on available space, has a width to match the anchor, and is sized vertically by contentAnchoredRegionConfig
FlyoutPosTopFillA region that always places itself above the anchor, has a width to match the anchor, and is sized vertically by available spaceAnchoredRegionConfig
FlyoutPosBottomFillA region that always places itself below the anchor, has a width to match the anchor, and is sized vertically by available spaceAnchoredRegionConfig
FlyoutPosTallestFillA region that places itself above or below the anchor based on available space, has a width to match the anchor, and is sized vertically by available spaceAnchoredRegionConfig

class: AnchoredRegion

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
anchorpublicstring""The HTML ID of the anchor element this region is positioned relative to
viewportpublicstring""The HTML ID of the viewport element this region is positioned relative to
horizontalPositioningModepublicAxisPositioningMode"uncontrolled"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
horizontalDefaultPositionpublicHorizontalPosition"unset"The default horizontal position of the region relative to the anchor element
horizontalViewportLockpublicbooleanfalseWhether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis
horizontalInsetpublicbooleanfalseWhether the region overlaps the anchor on the horizontal axis
horizontalThresholdpublicnumberHow narrow the space allocated to the default position has to be before the widest area is selected for layout
horizontalScalingpublicAxisScalingMode"content"Defines how the width of the region is calculated
verticalPositioningModepublicAxisPositioningMode"uncontrolled"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
verticalDefaultPositionpublicVerticalPosition"unset"The default vertical position of the region relative to the anchor element
verticalViewportLockpublicbooleanfalseWhether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis
verticalInsetpublicbooleanfalseWhether the region overlaps the anchor on the vertical axis
verticalThresholdpublicnumberHow short the space allocated to the default position has to be before the tallest area is selected for layout
verticalScalingpublicAxisScalingMode"content"Defines how the height of the region is calculated
fixedPlacementpublicbooleanfalseWhether 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,
autoUpdateModepublicAutoUpdateMode"anchor"Defines what triggers the anchored region to revaluate positioning
anchorElementpublicHTMLElement or nullnullThe HTML element being used as the anchor
viewportElementpublicHTMLElement or nullnullThe HTML element being used as the viewport
verticalPositionpublicAnchoredRegionPositionLabel or undefinedindicates the current horizontal position of the region
horizontalPositionpublicAnchoredRegionPositionLabel or undefinedindicates the current vertical position of the region
updatepublicupdate position
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
loadedFires a custom 'loaded' event when the region is loaded and visible
positionchangeFires a custom 'positionchange' event when the position has changed

Attributes

NameFieldInherited From
anchoranchor
viewportviewport
horizontal-positioning-modehorizontalPositioningMode
horizontal-default-positionhorizontalDefaultPosition
horizontal-viewport-lockhorizontalViewportLock
horizontal-insethorizontalInset
horizontal-thresholdhorizontalThreshold
horizontal-scalinghorizontalScaling
vertical-positioning-modeverticalPositioningMode
vertical-default-positionverticalDefaultPosition
vertical-viewport-lockverticalViewportLock
vertical-insetverticalInset
vertical-thresholdverticalThreshold
vertical-scalingverticalScaling
fixed-placementfixedPlacement
auto-update-modeautoUpdateMode

Slots

NameDescription
The default slot for the content

Additional resources