Skip to main content
cngx-src documentation

CngxStack

ComponentPrimaryOnPushv0.1.0

projects/ui/layout/stack.component.ts

GitHub

Import#

import { CngxStack } from '@cngx/ui/layout'

Description#

Composable flex-based stack layout component.

Gap tokens use CSS custom properties (--cngx-gap-xs through --cngx-gap-xl) that fall back to the density scale (--cngx-space-*), so a root [data-density] swap rescales the stack. Override the --cngx-gap-* hooks at any scope to detach a stack from the scale.

Item 1
Item 2

Related#

Metadata#

Selector
cngx-stack
Change detection
ChangeDetectionStrategy.OnPush

Host#

Bound styles
flex-direction ← direction align-items ← alignItems gap ← gapValue

Index#

Inputs

aligndirectiongap

HostBindings

style.flex-directionstyle.align-itemsstyle.gap

Inputs#

align#StackAlign
input()

Cross-axis alignment of stack items.

default 'stretch'
direction#StackDirection
input()

Flex direction of the stack.

default 'column'
gap#StackGap
input()

Named spacing token between stack items. Resolves via --cngx-gap-* CSS custom properties.

default 'md'

HostBindings#

BindingExpression
[style.flex-direction]direction()
[style.align-items]alignItems()
[style.gap]gapValue()
Enter to selectArrow Down Arrow Up to navigateEsc to close