@talenra/components documentation
  1. Components
  2. WorkspaceSimpleComponent

File

workspace-simple/src/workspace-simple/workspace-simple.component.ts

Description

Provides a simple template for content layout.

Import

Example :
import { WorkspaceSimpleComponent } from '@talenra/components/workspace-simple';

../../../#/workspace-layout/workspace-simple

Metadata

selector talenra-workspace-simple
imports ContentLayoutComponent NgTemplateOutlet
styleUrls ./workspace-simple.component.scss
templateUrl ./workspace-simple.component.html

Index

Inputs

Inputs

overscrollHeader
Default value : true, { transform: booleanAttribute }

Determines whether the content is allowed to take the full height and to cover the header when scrolled. Has no effect if useContentLayout is false.

See ContentLayoutComponent for more information.

Example :
<talenra-workspace-simple useContentLayout [overscrollHeader]="false">
  <div header>My header</div>
  <div>My scrollable Content</div>
</talenra-workspace-simple>
useContentLayout
Default value : false, { transform: booleanAttribute }

If true, the content passed to the component will be wrapped by a <talenra-content-layout> component that controls the vertical layout and behaviour (e.g. takes care of scrolling).

See ContentLayoutComponent for more information.

Example :
<talenra-workspace-simple useContentLayout>
  <div header>My header</div>
  <div sticky-bar>My toolbar</div>
  <div>My content</div>
</talenra-workspace-simple>
useHeader
Default value : true, { transform: booleanAttribute }

Determines whether the layout uses a header element. Has no effect if useContentLayout is false.

See ContentLayoutComponent for more information.

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

Determines whether the layout uses a sticky bar element. Has no effect if useContentLayout is false.

See ContentLayoutComponent for more information.

Example :
<!-- As `useStickyBar` defaults `true`, you could safely omit the input in this case. -->
<talenra-workspace-simple useContentLayout useStickyBar>
  <div sticky-bar>My sticky bar</div>
</talenra-workspace-simple>
useStickyFooter
Default value : true, { transform: booleanAttribute }

Determines whether the layout uses a sticky footer element. Has no effect if useContentLayout is false.

See ContentLayoutComponent for more information.

Example :
<!-- As `useStickyFooter` defaults `true`, you could safely omit the input in this case. -->
<talenra-workspace-simple useContentLayout useStickyFooter>
  <div sticky-footer>My sticky footer</div>
</talenra-workspace-simple>
width
Type : TWorkspaceWidth
Default value : WorkspaceWidth.L

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

Example :
<talenra-workspace-simple width="s"></talenra-workspace-simple>

See WorkspaceWidth

results matching ""

    No results matching ""