furo-ui5-card

furo-ui5-card #

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

Summary: Ui5 card with data bindings

Description #

The furo-ui5-card is a bindable card that represents information in the form of a tile with separate header and content areas.

1
2
3
4
5
6
7
8

 <furo-ui5-card
   heading="Title"
   subheading="Secondary text"
   icon="card"
 >
     <div slot="action"><furo-ui5-button>Action</furo-ui5-button></div>
     <div slot="content">content goes here</div>
 </furo-ui5-card>

How To Use Semantic Colors #

You can use semantic colors to visualize the status or state. Set the attribute design="" with the following values:

  • Positive (–sapPositiveColor)
  • Negative (–sapNegativeColor)
  • Critical (–sapCriticalColor)
  • Neutral (–sapCriticalColor)
1
2
3
4
5
6

 <furo-ui5-card
   design="Positive"
   icon="card"
 >
     <div slot="content">content goes here</div>
 </furo-ui5-card>

Example #

Action
content goes here
 
1
2
3
4

 <furo-ui5-card design="Positive" icon="globe" heading="Title" subheading="Secondary text" icon="card">
   <div slot="action"><furo-ui5-button>Action</furo-ui5-button></div>
   <div slot="content">content goes here</div>
 </furo-ui5-card>

Attributes and Properties #

icon #

icon reflects string default: ''

Defines the visual representation in the header of the card. Supports images and icons. https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html

heading #

heading string default: ''

Defines the title displayed in the ui5-card header.

subheading #

subheading string default: ''

Defines the subheading displayed in the ui5-card header.

status #

status string default: ''

Defines the status text displayed in the card header (upper right).

By enabling the status, actions are not visible.

headerInteractive #

header-interactive reflects boolean default: false

Defines if the ui5-card header would be interactive, e.g gets hover effect, gets focused and header-click event is fired, when it is pressed.

noContentPadding #

no-content-padding reflects boolean default: false

Shows the content slot area with no padding

Events #

header-clicked #

at-header-clicked → ``

Fired when the card head is clicked. The header-interactive attribute must be set.

header-click #

at-header-click → ``

Fired when interactive header was clicked.

Methods #

bindHeading #

bindHeading(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-heading

Binds any scalar field to set the title of the panel.

Supported types: scalar types e.g. string

  • fieldNode string

bindIcon #

bindIcon(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-icon

Binds a FieldNode to set the icon of the panel.

Do not forget to import the icon you will use in your component.

Supported types: string

  • fieldNode string

bindSubheading #

bindSubheading(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-subheading

Binds any scalar field to set the subtitle of the panel.

Supported types: scalar types e.g. string

  • fieldNode string

bindNavNode #

bindNavNode(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-nav-node

Binds a FieldNode with the following signature:

  • display_name (string)

  • secondary_text (string)

  • icon (string)

  • fieldNode string

Slots #

action #

Type: HTMLElement [0..n]

defines an action, displayed in the right most part of the header. Note: If status is set, the status text will be displayed, you can either have action, or status.

content #

Type: HTMLElement [0..n]

defines the content of the card