Vuetify-floating-image-card NPM

vuetify-floating-image-card

demo

The picture used in demo is from vuetify document. demo-pic1

<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

6 years ago

6 years ago

6 years ago