@talenra/components documentation
  1. Components
  2. OverlayLayoutComponent

File

overlay/src/layouts/overlay-layout/overlay-layout.component.ts

Description

The overlay layout component is a layout component that can be used to display the content of an overlay

Example :
<talenra-overlay-layout [overlayRef]="overlayRef" [title]="title" [subtitle]="subTitle" width="m">
  <app-pane class="sticky-bar" sticky-bar>
    ...
  </app-pane>
  <app-pane class="pane">
    ...
  </app-pane>
  <app-pane class="sticky-footer button-pane" sticky-footer>
    ...
  </app-pane>
</talenra-overlay-layout>

Import

Example :
 import { OverlayLayoutComponent } from '@talenra/components/overlay';

Metadata

selector talenra-overlay-layout
imports WorkspaceSimpleComponent WorkspaceHeaderComponent CloseOverlayComponent
styleUrls ./overlay-layout.component.scss
templateUrl ./overlay-layout.component.html

Index

Inputs

Inputs

overlayRef
Type : OverlayRef
Required :  true

Reference to overlay component
overscrollHeader
Type : boolean
Default value : true

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

See ContentLayoutComponent for more information.

Example :
<talenra-overlay-layout [overscrollHeader]="false">
  <div header>My header</div>
  <div>My scrollable Content</div>
</talenra-overlay-layout>
subtitle
Type : string
Default value : ''

The subtitle displayed to the user
title
Type : string
Default value : ''

The title displayed to the user
useHeader
Type : boolean
Default value : true

Determines whether the overlay uses a header element.

See ContentLayoutComponent for more information.

Example :
<!-- As `useHeader` defaults `true`, you could safely omit the input in this case. -->
<talenra-overlay-layout [useHeader]="true">
  <div header>My header</div>
</talenra-overlay-layout>
useStickyBar
Type : boolean
Default value : true

Determines whether the overlay uses a sticky bar element.

See ContentLayoutComponent for more information.

Example :
<!-- As `useStickyBar` defaults `true`, you could safely omit the input in this case. -->
<talenra-overlay-layout [useStickyBar]="true">
  <div sticky-bar>My sticky bar</div>
</talenra-overlay-layout>
useStickyFooter
Type : boolean
Default value : true

Determines whether the overlay uses a sticky footer element.

See ContentLayoutComponent for more information.

Example :
<!-- As `useStickyFooter` defaults `true`, you could safely omit the input in this case. -->
<talenra-overlay-layout [useStickyFooter]="true">
  <div sticky-footer>My sticky footer</div>
</talenra-overlay-layout>
width
Type : TWorkspaceWidth
Default value : WorkspaceWidth.L

Determines the maximum width of the layout. Defaults to WorkspaceWidth.L.

Example :
<talenra-overlay-layout width="s"></talenra-overlay-layout>

See WorkspaceWidth
counter
Default value : undefined, { transform: numberAttribute }

A numeric counter value attached to the title (visually represented as badge/call-out). Typically a number that represents the number of items contained in this section.

Example :
<talenra-overlay-layout ... counter="42"></talenra-overlay-layout>
counterMax
Default value : undefined, { transform: numberAttribute }

The maximum value of the counter. If the counter value exceeds this limit, "+" will be displayed (e.g. "99+").

Example :
<talenra-overlay-layout ... counterMax="99"></talenra-overlay-layout>

results matching ""

    No results matching ""