@finastra/expansion-panel NPM

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