@talenra/components documentation
  1. Components
  2. ContentLayoutComponent

File

content-layout/src/content-layout/content-layout.component.ts

Description

Controls the vertical layout of your content. Is typically combined with a workspace-layout that controls the horizontal layout.

  • Adds scrolling if the content exceeds the container height.
  • Supports a header section with an optional "overscroll" effect
  • Supports an optional sticky bar (e.g. a toolbar)
  • Supports an optional sticky footer (e.g. buttons)

See WorkspaceLayoutSimpleComponent and WorkspaceLayoutSidepanelComponent for examples on how to use Content Layout in combination with a Workspace layout.

Example :
<!-- A minimal example using StickyBar component -->
<talenra-content-layout>
  <div header>My header</div>
  <!-- StickyBar component handles styling and acts as a wrapper for your content. -->
  <talenra-sticky-bar sticky-bar>My toolbar</talenra-sticky-bar>
  <div>My content</div>
  <div sticky-footer>My footer bar</div>
</talenra-content-layout>
Example :
<!-- A minimal example using custom sticky bar -->
<talenra-content-layout>
  <div header>My header</div>
  <!-- Custom sticky bar -->
  <aside sticky-bar>My toolbar</aside>
  <div>My content</div>
  <div sticky-footer>My footer bar</div>
</talenra-content-layout>

Import

Example :
import { ContentLayoutComponent } from '@talenra/components/content-layout';

../../../#/content-control/content-layout

Implements

AfterViewInit OnDestroy

Metadata

host {
}
providers contentLayoutServiceFactory
selector talenra-content-layout
imports ScrollContainerComponent
styleUrls ./content-layout.component.scss
templateUrl ./content-layout.component.html

Index

Inputs

Inputs

overscrollHeader
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

Determines whether the content is allowed to take the full height and to cover the header when scrolled.

Example :
<talenra-content-layout overscrollHeader>
  <div header>My header</div>
  <div>My scrollable Content</div>
</talenra-content-layout>
useHeader
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

Determines whether the layout uses a header element. The header element is injected using content projection: Place it the component's content and mark it with the header attribute.

Example :
<!-- As `useHeader` defaults `true`, you could safely omit the input in this case. -->
<talenra-content-layout useHeader>
  <div header>My header</div>
</talenra-content-layout>
useStickyBar
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

Determines whether the layout uses a sticky bar element. The sticky bar element is injected using content projection: Place it the component's content and mark it with the sticky-bar attribute.

The following class names are added/removed to the sticky bar element depending of ContentLayout's state:

  • no-header: ContentLayout does not use a header (useHeader = false)
  • header-reduced: Header is reduced (overscrolled by content)
  • content-scrolled: Content has scroll-offset
Example :
<!-- As `useStickyBar` defaults `true`, you could safely omit the input in this case. -->
<talenra-content-layout useStickyBar>
  <div sticky-bar>My sticky bar</div>
</talenra-content-layout>
useStickyFooter
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

Determines whether the layout uses a sticky footer element. The sticky footer element is injected using content projection: Place it the component's content and mark it with the sticky-footer attribute.

Example :
<!-- As `useStickyFooter` defaults `true`, you could safely omit the input in this case. -->
<talenra-content-layout useStickyFooter>
  <div sticky-footer>My sticky footer</div>
</talenra-content-layout>

results matching ""

    No results matching ""