furo-ui5-header-panel #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-header-panel.js';
exports FuroUi5HeaderPanel js
exports <furo-ui5-header-panel> custom-element-definition
superclass LitElement
mixes FBP

Summary: A bindable header panel

Description #

A bindable header panel.

Info: This component is intended to use as a header panel, if you need panels in your view, consider to use a ui5-panel directly. That is also the reason that the api does not match with ui5-panel.

This component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.

 <furo-ui5-header-panel header-text="Header Text" secondary-text="Subtitle Text" icon="task"></furo-ui5-header-panel>

Sample #

default slot
action slot
<furo-ui5-header-panel header-text="Header Text">
  <div>default slot</div>
  <ui5-button design="Emphasized" slot="action">action slot</ui5-button>

Sample with icon #

default slot
action slot action slot
<furo-ui5-header-panel header-text="Header Text" secondary-text="Subtitle Text" icon="task">
  <div>default slot</div>
  <ui5-button design="Transparent" slot="action">action slot</ui5-button>
  <ui5-button design="Emphasized" slot="action">action slot</ui5-button>

Attributes and Properties #

icon #

icon string default: ''


iconSize #

icon-size string default: 'S'

size of the icon. Available options are: XS S M L XL. Default is S.

headerText #

header-text string default: ''

Header Text

headerTextLevel #

header-text-level string default: 'H2'

Set the level of the header text, default is H2

secondaryText #

secondary-text string default: ''

sub title

collapsed #

collapsed reflects boolean default: false


nonInteractive #

non-interactive boolean default: false

Disables the toggler tabindex.

headerIcon #

header-icon string

Set this to have a clickable icon on the header line

bigAction #

big-action Boolean

Set to true to have a bigger action area (50:50).

The default ratio for title:action slot is 75:25

Events #

collapsed #


Fired when panel is collapsed by user interaction.

expanded #


Fired when panel is expanded by user interaction.

header-icon-clicked #


{buttonRef} Fired when the header icon was clicked.

Methods #

bindHeaderText #

bindHeaderText(fieldNode FieldNode ) ⟹ void

FieldNode fn-bind-header-text

Bind any scalar field to set the title of the panel. Supported types: scalar types

  • fieldNode

bindSecondaryText #

bindSecondaryText(fieldNode FieldNode ) ⟹ void

FieldNode fn-bind-secondary-text

Bind any scalar field to set the secondaryText of the panel.

  • fieldNode

bindNavNode #

bindNavNode(fieldNode FieldNode ) ⟹ void

FieldNode fn-bind-nav-node

bind a furo.navigation.Navigationnode field

  • fieldNode

bindIcon #

bindIcon(fieldNode FieldNode ) ⟹ void

FieldNode fn-bind-icon

Bind any scalar field to set the title of the panel. Do not forget to import the icon you will use in your component.

  • fieldNode

toggleCollapse #

toggleCollapse() ⟹ void


toggles the collapse state

Slots #

action #

Type: HTMLElement [0..n]

defines an action, displayed in the right most part of the header panel.

default #

Type: HTMLElement [0..n]

defines the content of the panel ### Styling The following custom properties and mixins are available for styling:

Styling #

The following custom properties available for styling:

Custom property Description
--furo-ui5-header-panel-icon-color Color of the icon
default: --ui5-avatar-initials-color fallback: #ffffff
--furo-ui5-header-panel-icon-background-color background Color of the icon
default: --ui5-avatar-accent6 fallback: #354a5f
--furo-ui5-header-panel-splitter-start-color the gradient-start hex-Color of the splitter
default: --sapHighlightColor fallback: #0854a0
--furo-ui5-header-panel-splitter-end-rgba-color the gradient-end rgba-Color of the splitter
default: rgba(8, 84, 16, 0) fallback: rgba(8, 84, 16, 0)