sticker-card

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