@mrfastdie/vue-preline v1.2.2
vue-preline
This Vue 3 plugin publishes some tailwind and preline components.
Recommended Setup
app.ts
import createVuePlugin from "@mrfastdie/vue-preline";
import '../node_modules/@mrfastdie/vue-preline/dist/style.css';
...
const app = createApp(App);
app.use(createVuePlugin())
app.mount('#app');
If you need the power of fontawesome icons, install that plugin aswell.
There are some global types for margin
and padding
defined, as per tailwind doc.
p
paddingpt
padding-toppr
padding-rightpb
padding-bottompl
padding-leftpx
padding left and rightpy
padding top and bottom
And the same goes for m (margin)
Components
VP-Grid
This is a simple grid component.
Usage:
<vp-grid :cols="<numberOfCols>" :gap="<numberOfGab"></vp-grid>
VP-Input
An input field
Usage:
<vp-input />
Following arguments are supported:
label
a string as labelplaceholder
a string as placeholdertype
the input type, defaults totext
description
a string as field descriptionvalidate
true
,false
ornull
if the value should get validatederrText
string or null when validate isfalse
successText
string or null when validate istrue
icon
a string array represents the icon fromfontawesome
value
a string which can be used with the.sync
modifier to get the current value of that field
To update a value in the parentNode using the value
set it up like:
<script setup lang="ts">
import {ref} from 'vue';
const parentValue = ref('');
</script>
Then you can use this childComponent like:
<vp-input v-model:value="parentValue" />
vp-columns
Usage:
<vp-columns columns="cols">entries</vp-columns>
The attribute columns can be one of the following:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- auto
- 3xs
- 2xs
- xs
- sm
- md
- lg
- xl
- 2xl
- 3xl
- 4xl
- 5xl
- 6xl
7xl
Timeline
The timeline persists out of 3 components. This is the wrapper:
<vp-timeline-wrapper>Timeline entries</vp-timeline-wrapper>
And the child components for left and right hand side of that timeline:
<vp-timeline-entry-left>Timeline text</vp-timeline-entry-left>
<vp-timeline-entry-right>Timeline text</vp-timeline-entry-right>
The child component accepts following arguments:
headline
a string representing the headlinedate
a string the date or rangeicon
a string array represents the icon fromfontawesome
iconBackgroundColor
the css background color for the iconiconTextColor
the css text color for the icon
Cards
There are currently 3 card components:
<vp-card-img-top>Card text</vp-card-img-top>
<vp-card-img-left>Card text</vp-card-img-left>
<vp-card-img-right>Card text</vp-card-img-right>
The cards accept following arguments:
imgSrc
a string which points to the image you want as your card imagetitle
a string as titlegithubUrl
a string which points to your gitHub repo