The LinkBox component is a customizable container for displaying links to documents or files in a visually appealing box format. It allows you to organize and present files with icons, titles, and customizable backgrounds, making it easy for users to access important resources.
The component supports two usage formats: a detailed version with customizable styles and a simplified version for quick implementation.
Example Usage:
Detailed version:
<ui-link-box
title="My documents and files"
file-icon="mdi-file-document-outline"
file-background-class="bg-primary"
file-class="v-col-md-3"
background-class="bg-blue-grey-lighten-4"
header-class="bg-primary text-on-primary"
:row-height="90"
:files="[
{
'link': 'https://drive.google.com/file/d//preview',
'title': 'Compensation Plan',
},
{
'link': 'https://drive.google.com/file/d//preview',
'title': 'Compensation Plan',
'icon': 'mdi-file-document-outline',
'backgroundClass': 'bg-primary',
'badge': 'new',
'class': 'v-col-md-6',
},
]"
>
</ui-link-box>Simplified version:
<ui-link-box
:files="[
{ link: 'https://drive.google.com/file/d//preview',title: 'Terms of services' },
]"
></ui-link-box>| Attribute | Default | Type | Description |
| title | — | String | Title of the box |
| background-class | — | String | Background class for the box |
| header-class | — | String | Header class for the box |
| file-icon | — | String | Default icon for files |
| file-background-class | — | String | Default background class for files |
| file-class | — | String | Default class for files (to change width using v-col-md-{N}) |
| row-height | — | Number | Height of the row (to ensure uniform button height) |
| files | — | Array | Array of files to be displayed in the widget |
| link | — | String | Link to the file |
| title | — | String | Title of the file |
| icon | — | String | Icon for the file |
| backgroundClass | — | String | Background class for the file |
| badge | — | String | Badge for the file |
| class | — | String | Class for the file (to change width using v-col-md-{N}) |
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).