Luca Haid
742a2c1495
- added axios library to plugins - added vue library to plugins - added tt-frontend-framework for vue with basic documentation - added git_merge_ts to additionalCSS - added git_merge_ts to additionalJS - added property JSGlobals - refactored RaspberryDisplay Module
46 lines
1.3 KiB
Markdown
46 lines
1.3 KiB
Markdown
# TheTool Vue Frontend Framework
|
|
|
|
## Components
|
|
|
|
### tt-page-title
|
|
|
|
The `tt-page-title` is used to create the Title and breadcumbs on the top of the page
|
|
#### Props
|
|
|
|
- `title`: String - The title of the current page. This will be displayed prominently at the top of the breadcrumb navigation bar.
|
|
- `path`: Array - An array of objects representing the breadcrumb path. Each object in the array should have the following properties:
|
|
- `text`: String - The display text for the breadcrumb item.
|
|
- `href`: String - The URL that the breadcrumb item links to.
|
|
|
|
#### Usage
|
|
|
|
Include the Component on the View
|
|
```php
|
|
$additionalJS = ["plugins/vue/tt-components/tt-page-title.js"];
|
|
```
|
|
|
|
Then use it inside the Vue App
|
|
```vue
|
|
<tt-page-title :title="'Your Page Title'" :path="[
|
|
{ text: 'Home', href: '/' },
|
|
{ text: 'Library', href: '/library' },
|
|
{ text: 'Data', href: '/library/data' } // Current Page
|
|
]"></tt-page-title>
|
|
```
|
|
|
|
### tt-loader
|
|
|
|
The `tt-loader` is used to display a loader
|
|
|
|
#### Usage
|
|
|
|
Include the Component on the View
|
|
```php
|
|
$additionalJS = ["plugins/vue/tt-components/tt-loader.js"];
|
|
$additionalCSS = ["plugins/vue/tt-components/css/tt-loader.css"];
|
|
```
|
|
|
|
Then use it inside the Vue App in the container where it should get full width
|
|
```vue
|
|
<tt-loader></tt-loader>
|