Main content area within a CngxSidenavLayout
CngxSidenavContent
ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA
projects/ui/sidenav/sidenav-content.ts
Import#
import { CngxSidenavContent } from '@cngx/ui/sidenav'
Description#
Main content area within a CngxSidenavLayout.
Auto-adjusts margins when sibling sidenavs are in push or side
mode. Must be a direct child of CngxSidenavLayout.
<cngx-sidenav-layout>
<cngx-sidenav position="start">…</cngx-sidenav>
<cngx-sidenav-content>
<router-outlet />
</cngx-sidenav-content>
</cngx-sidenav-layout>Metadata#
Host#
Index#
Instance Properties#
Readonly
Margin offset for the start sidenav.
Push and side modes use position: relative - the sidenav sits in
the flex flow and the content shrinks naturally via flex: 1.
No margin needed. Over mode uses position: absolute - no margin needed
either since the sidenav floats above content.
Kept as a public computed so tests and consumers can still read it.
'0'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-sidenav-content] | true |
[style.margin-inline-start] | marginStart |
[style.margin-inline-end] | marginEnd |