Overview
The Card component (mt-card) provides a structured container for organizing content with optional header, toolbar, tabs, and footer sections. It supports various slots for customization and includes features like loading states, context menus, and inheritance toggles.
import MtCard from '@/components/layout/mt-card/mt-card.vue';
title
string
default:"undefined"
The main title displayed in the card header
subtitle
string
default:"undefined"
The subtitle displayed below the title in the card header
When true, displays a loading indicator over the card content
Deprecated in v4.0.0 - Makes the card wider (max-width: 83.125rem)
inheritance
boolean
default:"undefined"
Controls the inheritance toggle button visibility. When defined, shows a link icon that can be toggled
Emitted when the inheritance toggle button is clicked. Returns the new inheritance state
The main content area of the card
Alternative slot to the title property for custom title rendering
Alternative slot to the subtitle property for custom subtitle rendering
Slot for displaying an avatar or logo in the card header
Slot for adding content to the right side of the card header
Slot for adding toolbar functionality like search bars, buttons, etc.
Slot for adding a tab bar (typically used with mt-tabs component)
Slot for adding footer content at the bottom of the card
Slot for adding mt-context-menu-item components to render a context menu
Slot for rendering a data grid within the card
Usage Examples
Basic Card
<template>
<mt-card title="Basic Card" subtitle="This is a subtitle">
<p>Card content goes here</p>
</mt-card>
</template>
<script setup>
import MtCard from '@/components/layout/mt-card/mt-card.vue';
</script>
Card with Toolbar and Footer
<template>
<mt-card title="Products" subtitle="Manage your products">
<template #toolbar>
<mt-button variant="primary">Add Product</mt-button>
<mt-button variant="secondary">Import</mt-button>
</template>
<p>Product list content...</p>
<template #footer>
<span>Total: 42 products</span>
</template>
</mt-card>
</template>
<template>
<mt-card title="Settings">
<template #context-actions>
<mt-context-menu-item label="Edit" />
<mt-context-menu-item label="Duplicate" />
<mt-context-menu-item label="Delete" type="critical" />
</template>
<p>Settings content...</p>
</mt-card>
</template>
Card with Tabs
<template>
<mt-card title="Configuration">
<template #tabs>
<mt-tabs
:items="tabItems"
:default-item="activeTab"
@new-item-active="handleTabChange"
/>
</template>
<p>Content for: {{ activeTab }}</p>
</mt-card>
</template>
<script setup>
import { ref } from 'vue';
const activeTab = ref('general');
const tabItems = [
{ name: 'general', label: 'General' },
{ name: 'advanced', label: 'Advanced' },
{ name: 'permissions', label: 'Permissions' }
];
const handleTabChange = (tabName) => {
activeTab.value = tabName;
};
</script>
Card with Inheritance Toggle
<template>
<mt-card
title="Inherited Settings"
:inheritance="isInherited"
@update:inheritance="isInherited = $event"
>
<p>These settings are {{ isInherited ? 'inherited' : 'custom' }}</p>
</mt-card>
</template>
<script setup>
import { ref } from 'vue';
const isInherited = ref(true);
</script>
Loading State
<template>
<mt-card title="Loading Data" :is-loading="isLoading">
<p v-if="!isLoading">Data loaded successfully</p>
</mt-card>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const isLoading = ref(true);
onMounted(async () => {
await fetchData();
isLoading.value = false;
});
</script>
/home/daytona/workspace/source/packages/component-library/src/components/layout/mt-card/mt-card.vue:1