@natec/mef-dev-ui-kit documentation
  1. Components
  2. CollapseSetComponent

File

src/lib/markup-kit/collapse/collapse-set/collapse-set.component.ts

Description

Component representing a set of collapsible panels.

Example of usage:

<mefdev-collapse-set [Accordion]="true" [Horizontal]="true" [expandAny]="false">
  <mefdev-collapse [Disabled]="false" [Active]="true">
      <!-- Content for the collapse panel -->
      <h3>Panel 1</h3>
      <p>Panel 1 content...</p>
  </mefdev-collapse>

  <mefdev-collapse [Disabled]="false" [Active]="false">
      <!-- Content for the collapse panel -->
      <h3>Panel 2</h3>
      <p>Panel 2 content...</p>
  </mefdev-collapse>

  <mefdev-collapse [Disabled]="false" [Active]="false">
      <!-- Content for the collapse panel -->
      <h3>Panel 3</h3>
      <p>Panel 3 content...</p>
  </mefdev-collapse>
</mefdev-collapse-set>

Metadata

encapsulation ViewEncapsulation.None
selector mefdev-collapse-set
styleUrls ./collapse-set.component.scss
templateUrl ./collapse-set.component.html

Index

Properties
Methods
Inputs
Accessors

Inputs

Accordion
Type : boolean

Indicates whether the collapse set operates as an accordion. Set this to true to enable accordion behavior. Defaults to false.
expandAny
Type : boolean

Indicates whether multiple panels can be expanded simultaneously. Set this to true to allow multiple panels to be expanded. Defaults to false.
Horizontal
Type : boolean

Indicates whether the collapse set is displayed horizontally or vertically. Set this to true for horizontal display and false for vertical display. Defaults to true.

Methods

addTab
addTab(collapse: CollapseComponent)

Adds a collapse panel to the collapse set.

Parameters :
Name Type Optional Description
collapse CollapseComponent No

The collapse component to be added.
Returns : void
pgClick
pgClick(collapse: CollapseComponent)

Event handler for the click event on a collapse panel. Closes other panels if the collapse set is an accordion and does not allow multiple expansions.

Parameters :
Name Type Optional Description
collapse CollapseComponent No

The clicked collapse component.
Returns : void

Properties

panels
Type : CollapseComponent[]
Default value : []

Accessors

expandAny
getexpandAny()
setexpandAny(value: boolean)

Indicates whether multiple panels can be expanded simultaneously. Set this to true to allow multiple panels to be expanded. Defaults to false.

Parameters :
Name Type Optional
value boolean No
Returns : void
Accordion
getAccordion()
setAccordion(value: boolean)

Indicates whether the collapse set operates as an accordion. Set this to true to enable accordion behavior. Defaults to false.

Parameters :
Name Type Optional
value boolean No
Returns : void
Horizontal
getHorizontal()
setHorizontal(value: boolean)

Indicates whether the collapse set is displayed horizontally or vertically. Set this to true for horizontal display and false for vertical display. Defaults to true.

Parameters :
Name Type Optional
value boolean No
Returns : void

results matching ""

    No results matching ""