Design

Examples

ExpansionPanel

Props

NameDescriptionTypeRequiredDefault
modelValuewhen true Expansion will be open. v-model can be used for 2 way bindingBooleanfalse-
levelshould be set to fit inside the header flow. Accessbility requirementNumberfalse2
titlewill set the title of the header. Use this OR title slotStringfalse-
loadingwhen true will display loading spinner in the panel contentBooleanfalsefalse
disabledwhen true the Expansion Panel will be disabled and not openBooleanfalsefalse

Events

  • update:modelValue - emitted with Boolean value when panel is opened or closed

Slots

  • title - optional slot. Will place content in the header. Use this OR title property
  • default - content that will be expanded

data-ref-ids

  • feather-expansion-header-button - clicking this will expand content area
  • feather-expansion-content - div containing content. Only in DOM if expanded