@talenra/components documentation
  1. Components
  2. WorkspaceSidepanelComponent

File

workspace-sidepanel/src/workspace-sidepanel/workspace-sidepanel.component.ts

Description

Provides a template for content that involves the sidepanel feature.

Import

Example :
import { WorkspaceSidepanelComponent } from '@talenra/components/workspace-sidepanel';

../../../#/workspace-layout/workspace-sidepanel

Implements

AfterContentInit

Metadata

host {
}
selector talenra-workspace-sidepanel
imports ContentLayoutComponent NgTemplateOutlet SidepanelTabbarComponent SidebarComponent AsyncPipe
styleUrls ./workspace-sidepanel.component.scss
templateUrl ./workspace-sidepanel.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. Has no effect if useContentLayout is false.

Example :
<talenra-workspace-sidepanel useContentLayout [overscrollHeader]="false">
  <div header>My header</div>
  <div>My scrollable Content</div>
</talenra-workspace-sidepanel>

See ContentLayoutComponent
useContentLayout
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

If true, the content passed to the component will be wrapped by Content Layout component that controls the vertical layout and behaviour (e.g. takes care of scrolling).

Example :
<talenra-workspace-sidepanel useContentLayout>
  <div header>My header</div>
  <div sticky-bar>My toolbar</div>
  <div>My content</div>
</talenra-workspace-sidepanel>

See ContentLayoutComponent
useHeader
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

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

Example :
<!-- As `useHeader` defaults `true`, you could safely omit the input in this case. -->
<talenra-workspace-sidepanel useContentLayout useHeader>
  <div header>My header</div>
</talenra-workspace-sidepanel>

See ContentLayoutComponent
useStickyBar
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

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

Example :
<!-- As `useStickyBar` defaults `true`, you could safely omit the input in this case. -->
<talenra-workspace-sidepanel useContentLayout useStickyBar>
  <div sticky-bar>My sticky bar</div>
</talenra-workspace-sidepanel>

See ContentLayoutComponent
useStickyFooter
Type : boolean, unknown
Default value : true, { transform: booleanAttribute }

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

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

See ContentLayoutComponent

results matching ""

    No results matching ""