Skip to main content
Version: Previous

Web Components - Anchored region

An anchored region is a container component that enables you 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.

Set-up​

import { provideDesignSystem, alphaAnchoredRegion } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaAnchoredRegion());

Usage​

A region that always renders above the anchor element.

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

Use cases​

  • Building block for components that need to position elements relative to another HTML Element (e.g. select, flyout, tooltip)
  • Used on its own in responsive layouts