SideListPanel

File: vue-web\components\SideListPanel.vue

Usage

SideListPanel works by using the template slots to define the content of the panel. The default slot is used to define the content of the right side of the panel. The listContent slot is used to define the content of the left side of the panel. The header slot is used to define the content of the header of the panel.

<SideListPanel>
  <template #header="{ isExpanded }">
    <div
      v-show="isExpanded"
      class="ring-0 w-full px-5 flex items-center justify-start"
    >
      <span class="p-input-icon-right w-full">
        <i class="pi pi-search " />
        <InputText class="w-full"  placeholder="Search.." />
      </span>
    </div>
  </template>

  <template #listContent>
    <EstimateSideListContent />
  </template>

  <template #default>
    <EstimateReadContent />
  </template>
</SideListPanel>

Props

Name	Type	Description
headerContainerClass	string, any[], object	CSS Class for the header container
scrollPanelClass	string, any[], object	CSS Classes for the ScrollPanel.

Events

Name	Callback	Description
shown		Emitted when the panel has opened..
change	visible: boolean	Emitted when the panel is expanded or collapsed.

Slots

Name	Scoped Slot	Description
default	SlotScopedProperties	Content to place in the right side of the panel.
header	SlotScopedProperties	Content to place in optional header of the panel
listContent	SlotScopedProperties	Content to place in the left side of the panel.

Types

SlotScopedProperties

Name	Type	Description
isExpanded	boolean	true when the panel is expanded.

Additional Resources

• https://gitlab.com/infopiphany/playground/ionic-catalog-vue/-/issues/98