Content Layout Component

The ContentLayout component provides a structured layout for displaying content with a title, breadcrumb-style navigation, and action buttons.

Props

Prop Name	Type	Default	Description
title	Array<{ name: string; link?: string }>	[]	The title of the content, displayed as breadcrumbs. Each item can be a plain text or a link.
actions	Array<{ title: string; emit: string; class?: string }>	[]	A list of action buttons, each emitting a specified event when clicked.
titleClass	string	""	Additional CSS classes for styling the title section.
bodyClass	string	""	Additional CSS classes for styling the body section.
disableMinHeight	boolean	"false"	Disable default minimun height for the body

Slots

Slot Name	Description
action-before	Custom content that appears before the action buttons.
action-after	Custom content that appears after the action buttons.
body	The main content body of the component.

Emits

Event Name	Payload Type	Description
customEventName	string | number (optional)	Emitted when an action button is clicked. The event name corresponds to the emit property of the action.

Usage Example

<template>
  <ContentLayout
    :title="breadcrumb"
    :actions="actions"
    bodyClass="p-4 bg-white"
    titleClass="justify-between items-center"
  >
    <template #body>
      <p>This is the main content body section.</p>
    </template>

    <template #action-before>
      <button class="btn-secondary mr-2" @click="handleBeforeAction">
        Before Action
      </button>
    </template>

    <template #action-after>
      <button class="btn-secondary ml-2" @click="handleAfterAction">
        After Action
      </button>
    </template>
  </ContentLayout>
</template>

<script setup lang="ts">
import { ref } from "vue";

const breadcrumb = ref([
  { name: "Home", link: "/" },
  { name: "Dashboard", link: "/dashboard" },
  { name: "Reports", count: 3 }, // last breadcrumb item
]);

const actions = ref([
  {
    title: "Add Report",
    emit: "add-report",
    class: "btn-primary",
  },
  {
    title: "Export",
    emit: "export-data",
    class: "btn-outline",
  },
]);

const handleBeforeAction = () => {
  console.log("Before action clicked");
}

const handleAfterAction = () => {
  console.log("After action clicked");
}
</script>

Screenshot

Notes

• The title prop allows breadcrumb-style navigation.

• The actions prop dynamically generates buttons that trigger events.

• The component provides action-before and action-after slots for extra customization.

• The body content is provided via the body slot.