Platform: Panel Component V1.0 Technical Design - SAP/fundamental-ngx GitHub Wiki

Summary

The panel is a container for grouping and displaying information. It(act as accordion) can be expanded and collapsed to save space on the screen.

Design

 <fdp-panel 
         [id]="panelID"
         [height]="auto"
         [width]="100%"
         [expanded]="true|false" 
         [expandable]="true|false"
         [type]="solid"|"translucent"|"transparent"
         (collapsed)="onPanelCollpased($event)"
         (expanded)="onPanelExpanded($event)"
         (clicked)="onPanelClick($event)">
         <fd-panel-header>
        <fd-panel-head>
            <h2 fd-panel-title>Panel Title</h2>
            <fd-panel-description>Panel Description</fd-panel-description>
        </fd-panel-head>
        <fd-panel-actions>
            Panel Actions
        </fd-panel-actions>
    </fd-panel-header>
    <fd-panel-body>
        Panel Body
    </fd-panel-body>
</fdp-panel>

PanelComponent

Property Bindings

[id]="panelID"

The unique panel Item id.

[height]="auto"

The Panel height. By setting the height of the content area will automatically be adjusted to match the height of its content. When the height of the panel is set to a fixed size, the content area can be scrolled through.

[width]="100%"

The Panel width.

[expanded]="true|false"

Indicates whether the Panel is expanded or not. If expanded="true", panel body content can be rendered. If expanded="false", then onlyheaderText is rendered body won't be.

[expandable]="true|false"

Indicates whether the control is expandable. This allows for collapsing or expanding the content of the Panel. If expandable is set to false, the Panel will always be rendered expanded.

There are 2 types of panels: fixed and expandable.

  • Fixed(not an accordion) panels are useful for grouping custom content. which include panel details.
  • Expandable(accordion) panels are much like fixed panels, except their content can be expanded and collapsed.

[type]="solid"|"translucent"|"transparent"

By default the background of the panel content is transparent, but it could be set to solid/Translucent as well.

Event Bindings

expanded = new EventEmitter();

  • An event emitted after the body's expand animation happens.

collapsed = new EventEmitter();

  • An event emitted after the body's collapse animation happens.

clicked = new EventEmitter();

  • An event emitted on click of panel header.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces

Related Modules

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • fd-panel-title, fd-panel-description, fd-panel-actions and fd-panel-body can be supported as:
<fd-panel-header>
        <fd-panel-head>
            <h2 i18n="@@panelTitle" fd-panel-title>Panel Title</h2>
            <fd-panel-description i18n="@@panelDesc">Panel Description</fd-panel-description>
        </fd-panel-head>
        <fd-panel-actions i18n="@@panelActions" >
            Panel Actions
        </fd-panel-actions>
    </fd-panel-header>
    <fd-panel-body i18n="@@panelBody">
        Panel Body
    </fd-panel-body>

Redesign Required: No

Additional Notes

Note

  • Fundamental-ngx core has panel component which does not act as accordion as per Fiori 3
  • During development need confirmation from Deno and Team can we override the existing panel component in core as per Fori3 or we will create a new component in the platform
  • Inside fdp-panel placeholder user can use panel-body,actions,description, footer, header components provided by fundamental-ngx/core
⚠️ **GitHub.com Fallback** ⚠️