The WidgetCard component allows you to create a custom content window or a full-fledged widget similar to PV, complete with an icon. Typically, this component is placed inside ui-aux, where you can generate the content.
Example Usage:
<ui-widget-card
id="resources"
background-class="elevation-2"
:rounded="4"
title="Resources"
header-class="bg-grey-lighten-2"
:disable-wrapper="false"
icon=""
hint-icon-text="What zis?"
>
<template #default>
<div class="text-center mt-4">
<p>
Get helpful downloads and resources in our Resource Center
</p>
<v-btn href="shop" class="mt-4" color="primary">
Access Resource Center
</v-btn>
</div>
</template>
</ui-widget-card>
Configuration:
export type WidgetCardProps = {
id?: string;
backgroundClass?: string;
headerClass?: string;
icon?: string;
title?: string;
hintIconText?: string;
rounded?: number;
height?: number;
disableWrapper?: boolean;
};
type WithSlots = WidgetCardProps & {
'#titleslot': string;
'#icon': string;
'#default': string;
'#postfix': string;
'#center': string;
};
| props | default | type | description |
| id | "resources" | String | Unique identifier for the widget |
| backgroundClass | "elevation-2" | String | CSS class for the background styling |
| headerClass | "bg-grey-lighten-2" | String | CSS class for the header styling |
| icon | String | Icon to display in the widget header | |
| title | "Resources" | String | Title of the widget |
| hintIconText | "What zis?" | String | Tooltip text for the hint icon |
| rounded | 4 | Number | Border radius of the widget |
| height | Number | Height of the widget | |
| disableWrapper | false | Boolean | Disables the wrapper if set to true |
Note: All settings can be customized either from the admin panel by manually
editing the code or from within the back office by clicking on the cog icon
in the upper left corner of the page (only accessible when the "Online office
admin" flag is present).