@finastra/expansion-panel

Expansion Panel

Expansion Panel provides an expandable details-summary view.

Usage

Import

npm i @finastra/expansion-panel

import '@finastra/expansion-panel';
...
<fds-expansion-panel>
    <fds-expansion-panel-item>
          <div slot="title">Trip name</div>
          <div slot="description">Caribbean cruise</div>
          <div class="content">
              Add a form to input the trip name
          </div>
    </fds-expansion-panel-item>

    <fds-expansion-panel-item expanded>
        <div slot="title">Location</div>
        <div slot="description">Select trip destination</div>
        <div class="content">
            Add a form to input the location
        </div>
    </fds-expansion-panel-item>

    <fds-expansion-panel-item disabled>
        <div slot="title">Start and end dates</div>
        <div slot="description">
          <span>Start date: Feb 29, 2016</span>
          <span>End date: Not set</span>
        </div>
        <div class="content"></div>
    </fds-expansion-panel-item>

</fds-expansion-panel>

API

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the expansion item should be disabled
expanded	expanded	boolean	false	Whether the expansion item is expaned
hideToggleIcon	hideToggleIcon	boolean
toggleIconPosition	toggleIconPosition	"before" | "after"

Methods

Method	Type
getParent	(): ExpansionPanel
handleHeaderClick	(): void

fds-expansion-panel

Properties

Property	Attribute	Type	Default	Description
displayMode	displayMode	"default"|"flat"	"default"	The display mode used for all expansion panel items.
hideToggleIcon	hideToggleIcon	boolean	false	Whether the expansion indicator should be hidden.
multi	multi	boolean	false	Whether the expansion should allow multiple expanded items
toggleIconPosition	toggleIconPosition	"before"|"after"	"after"	The position of toggle indicator for all expansion items

Methods

Method	Type
closeOtherExpansionItems	(current: Node): void
getExpansionItems	(): Node[]

Slots

Name	Description
default	Content to display in the body.
description	Content to display in the description.
title	Content to display in the title.

CSS Custom Properties

Property	Type	Default	Description
--fds-expansion-panel-item-header	text	"48px"	Header height.
--fds-expansion-panel-item-header-expanded	text	"64px"	Expanded header height.