sticker-card
v0.1.2
Published
bottom sticker card with absolute position, with opportunity to collapse/expande main info & with pages for each item in necessary
Downloads
11
Readme
StickerCard for Vue.js
###Example:
<sticker-card>
<!-- always visible header info -- >
<q-list slot="header">
<q-item multiline>
<q-item-main
label="Element name"
label-lines="1"
sublabel="Element description"
sublabel-lines="2"
/>
<q-item-side right>
<q-item-tile stamp>Element icon</q-item-tile>
</q-item-side>
</q-item>
<q-item class="q-body-1">
Some info<br>
More info
</q-item>
</q-list>
<!-- Expand / collapse body info -- >
<div>Expand / collapse Body</div>
<!-- always visible footer info -- >
<div slot="footer">Footer</div>
</sticker-card>
<sticker-card
:items="elements"
:expander="false"
>
<!-- body -->
<template slot-scope="slotProps">
<div>{{slotProps.value}}</div>
</template>
</sticker-card>
###Component properties:
// use items & slider for flilpping through
items: { default: () => { return null } },
// if body empty you can hide slider
expander: { type: Boolean, default: true },
// slider will be showed automaticly if units has length, but you can hide it
slider: { type: Boolean, default: true },
// text for expander
// when expand state
collapseText: { type: String, default: 'Collapse' },
// and when collapse state
expandText: { type: String, default: 'Expand' }
// set default page index
defaultPage: {type: Number, default: 1}
### Component events
on-item-change - only for mode with items