UNPKG

sticker-card

Version:

bottom sticker card with absolute position, with opportunity to collapse/expande main info & with pages for each item in necessary

61 lines (53 loc) 1.5 kB
## 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 ```