furo-ui5-subsection #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-subsection.js';
exports FuroUi5Subsection js
exports <furo-ui5-subsection> custom-element-definition
superclass LitElement
mixes FBP
mixes FieldNodeAdapter

Summary:

Description #

furo-ui5-subsection The furo-ui5-subsection component is a containers for actual content. It is envisaged that this component will be used within a furo-ui5-section Subsections have a progressive disclosure mechanism to show and hide content

https://experience.sap.com/fiori-design-web/object-page/#content-area

1
2
3
4
5
6
7

 <furo-ui5-section heading="STRING">
   <furo-ui5-subsection heading="Subsection Title">
     <furo-horizontal-flex slot="action">...</furo-horizontal-flex>
     <my-content></my-content>
     <more-content slot="more"></more-content>
   </furo-ui5-subsection>
 </furo-ui5-section>

Methods #

bindData(fieldNode) Binds an entity field to the heading. You can use the entity even when no data was received.

Attributes and Properties #

heading #

heading string default: ''

Heading title of the section

showMoreDataText #

show-more-data-text string default: 'Show More'

Defines the text that will be displayed for show more

showLessDataText #

show-less-data-text string default: 'Show Less'

Defines the text that will be displayed for show less

collapsed #

collapsed reflects boolean default: false

Collapsed state of the read more section

hasMoreContent #

default: false

level #

level string default: 'H4'

Defines the heading level. Available options are: “H6” to “H1”.

Methods #

_FBPReady #

_FBPReady() ⟹ void

* → fn–fbp-ready

Furo flow is ready lifecycle method

toggleCollapse #

toggleCollapse() ⟹ void

* → fn-toggle-collapse

toggles the collapse state

Slots #

default #

Type: HTMLElement [0..n]

defines the content of the subsection.

headline-start #

Type: HTMLElement [0..n]

defines the content right after the header.

headline-end #

Type: HTMLElement [0..n]

defines the content before the action slot.

action #

Type: HTMLElement [0..n]

defines the heading bar of the subsection.

more #

Type: HTMLElement [0..n]

defines the additional content in the show more section.