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.
<FluentAnchoredRegion> wraps the <fluent-anchored-region> element, a web component implementation of an anchored region leveraging the Fluent UI design system.
Examples
Fixed
Anchored region
inside
Download:
Dynamic (default)
The anchored region (the yellow block) is anchored to the button. It will dynamically position itself based on the available space.
Download:
Locked to default
Each region is anchored to the button with a specific lock position.
Download:
Scaling via update
Download:
Scaling via offset
Download:
Inset
Download:
Thresholds
Download:
Toggle anchor
1
Download:
Toggle position and size
Download:
RTL Dynamic
Download:
Size to Anchor
Download:
RTL Fill
Download:
Start & End
Download:
RTL Start & End
Download:
Add to fixed region
outside & fixed
No actual output shown here.The result of this example is added to the
Download:
Documentation
FluentAnchoredRegion Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Anchor | string? | Gets or sets the HTML ID of the anchor element this region is positioned relative to. This must be set for the component positioning logic to be active. | |
AutoFocus | bool | False | Gets or sets whether the element should receive the focus when the component is loaded. |
AutoUpdateMode | AutoUpdateMode? | Auto | Defines what triggers the anchored region to revaluate positioning. Default is 'Anchor'. In 'anchor' mode only anchor resizes and attribute changes will provoke an update. In 'auto' mode the component also updates because of - any scroll event on the document, window resizes and viewport resizes. See FluentAnchoredRegion.AutoUpdateMode |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
FixedPlacement | bool? | Gets or sets a value indicating 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? | Unset | Gets or sets the default horizontal position of the region relative to the anchor element. Default is unset. See HorizontalPosition |
HorizontalInset | bool | False | Gets or sets a value indicating whether the region overlaps the anchor on the horizontal axis. Default is false which places the region adjacent to the anchor element. |
HorizontalPositioningMode | AxisPositioningMode? | Dynamic | Sets what logic the component uses to determine horizontal placement. Locktodefault forces the default position. Dynamic decides placement based on available space. Uncontrolled (default) does not control placement on the horizontal axis. See AxisPositioningMode |
HorizontalScaling | AxisScalingMode? | Content | Defines how the width of the region is calculated. Default is 'Content'. See AxisScalingMode |
HorizontalThreshold | int | 0 | How narrow the space allocated to the default position has to be before the widest area is selected for layout. |
HorizontalViewportLock | bool | False | Gets or sets a value indicating whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis. |
Shadow | ElevationShadow | None | |
VerticalDefaultPosition | VerticalPosition? | Unset | Gets or sets the default vertical position of the region relative to the anchor element. Default is 'Unset'.See VerticalPosition |
VerticalInset | bool | False | Gets or sets a value indicating whether the region overlaps the anchor on the vertical axis. |
VerticalPositioningMode | AxisPositioningMode? | Dynamic | Sets what logic the component uses to determine vertical placement. Locktodefault forces the default position. Dynamic decides placement based on available space. Uncontrolled (default) does not control placement on the vertical axis. See AxisPositioningMode |
VerticalScaling | AxisScalingMode? | Content | Defines how the height of the region is calculated. Default is 'Content'. See AxisScalingMode |
VerticalThreshold | int | 0 | How short the space allocated to the default position has to be before the tallest area is selected for layout. |
VerticalViewportLock | bool? | Gets or sets a value indicating whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis. | |
Viewport | string? | Gets or sets the HTML ID of the viewport element this region is positioned relative to. If unset the parent element of the anchored region is used. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
FocusToNextElementAsync | Task | Moves the focus to the next element included in this anchor region only. | |
FocusToOriginalElementAsync | Task | Moves the focus to the initial element that triggered the anchor region. |