0.1.2 • Published 4 years ago
vuetify-floating-image-card
demo
The picture used in demo is from vuetify document.
<template>
<v-app>
<div class="d-flex justify-center mt-10">
<FloatingImageCard
:cardWidth="450"
cardTitle="floating image card"
cardSubTitle="using vuetify card"
imageSrc="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
>
<template #cardText>
build something great
</template>
<template #cardActions>
<v-btn text>OK</v-btn>
<v-btn text>CANCEL</v-btn>
</template>
</FloatingImageCard>
</div>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import FloatingImageCard from "vuetify-floating-image-card";
export default Vue.extend({
components: {
FloatingImageCard
}
});
</script>
getting started
make sure you have installed vuetify in your project
installation
yarn add vuetify-floating-image-card
//or
npm i vuetify-floating-image-card
import
<script>
import FloatingImageCard from "vuetify-floating-image-card";
export default Vue.extend({
components: {
FloatingImageCard
}
});
</script>
properties
css classes
prop name | type | required | default | about |
---|
rootClass | string | false | "" | Class for v-card(root element of this component) |
innerImageTitleClass | string | false | "" | Class for v-card-title inside the v-img. This prop is available when you provide innerImageTitle |
innerImageSubTitleClass | string | false | "" | Class for v-card-subtitle inside the v-img. This prop is available when you provide innerImageSubTitle |
cardTitleClass | string | false | "" | Class for v-card-title. This prop is available when you provide cardTitle |
cardSubTitleClass | string | false | "" | Class for v-card-subtitle. This prop is available when you provide cardSubTitle |
cardTextClass | string | false | "" | Class for v-card-text wrapping the cardText slot. Only available when you are using cardText slot |
cardActionsClass | string | false | "" | Class for v-card-actions wrapping the cardActions slot. Only available when you are using cardActions slot |
css styles
prop name | type | required | default | about |
---|
cardStyle | object(css properties) | false | {} | style object for v-card(root element of this component). Don't define padding(it will break the layout of floating image) |
innerImageTitleStyle | object(css properties) | false | {} | style object for v-card-title inside the v-img. This prop is available when you provide innerImageTitle |
innerImageSubTitleStyle | object(css properties) | false | {} | style object for v-card-subtitle inside the v-img. This prop is available when you provide innerImageSubTitle |
cardTitleStyle | object(css properties) | false | {} | style object for v-card-title. This prop is available when you provide cardTitle |
cardSubTitleStyle | object(css properties) | false | {} | style object for v-card-subtitle. This prop is available when you provide cardSubTitle |
cardTextStyle | object(css properties) | false | {} | style object for v-card-text wrapping the cardText slot. Only available when you are using cardText slot |
cardActionsStyle | object(css properties) | false | {} | style object for v-card-actions wrapping the cardActions slot. Only available when you are using cardActions slot |
sizing props
prop name | type | required | default | about |
---|
cardWidth | string or number | false | "" | width of root v-card |
maxCardWidth | string or number | false | "" | max-width of root v-card |
minCardWidth | string or number | false | "" | min-width of root v-card |
cardHeight | string or number | false | "" | height of root v-card |
maxCardHeight | string or number | false | "" | max-height of root v-card |
minCardHeight | string or number | false | "" | min-height of root v-card |
texts
prop name | type | required | default | about |
---|
innerImageTitle | string | false | "" | title inside the image(inside the v-card-title) |
innerImageSubTitle | string | false | "" | subtitle inside the image(inside the v-card-subtitle) |
cardTitle | string | false | "" | card title (inside the v-card-title) |
cardSubTitle | string | false | "" | card subtitle (inside the v-card-subtitle) |
other
prop name | type | required | default | about |
---|
imageSrc | string | true | "" | src for image |
mediaOffsets | number | false | 16 | offset of image to card edges |
mediaBorderR | number | false | 4 | border radius of image |
slots
cardText
- slot inside the v-card-text
- put your main contents here
cardActions
- slot inside the v-card-actions
- put your card actions here