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.

1

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

Sample #

1
2
3
4

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

Sample with icon #

1
2
3
4
5

<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>
</furo-ui5-header-panel>

Attributes and Properties #

icon #

icon string default: ''

icon

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

Collapsed

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 #

at-collapsed → Event

Fired when panel is collapsed by user interaction.

expanded #

at-expanded → Event

Fired when panel is expanded by user interaction.

header-icon-clicked #

at-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

* → fn-toggle-collapse

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: