chore: card demo update

Author: farfromrefug

demo-snippets/vue3/Card.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 
 <template>
     <GridLayout padding="4">
-        <FlexboxLayout borderRadius="16" boxShadow="0 0 3 3 rgba(0,0,0,.12)" :style="{ 'background': props.data.bg }" class="flex-col p-3 justify-between rounded-lg h-full">
+        <FlexboxLayout borderRadius="16" boxShadow="0 0 3 3 rgba(0,0,0,.12)" :backgroundColor="data.backgroundColor" class="flex-col p-3 justify-between rounded-lg h-full">
             <FlexboxLayout class="justify-between">
                 <Label text="Credit" class="text-xl font-bold text-white"></Label>
                 <!-- <Image :src="props.data.imgType" height="45"></Image> -->

demo-snippets/vue3/CardHome.vue

@@ -94,12 +94,12 @@ function toggleItemHeight(item) {
                 <Label ref="refTextHeader" text="Wallet" class="text-3xl font-bold text-black" horizontalAlignment="center"></Label>
                 <Label ref="refShowBtn" text="close" style="font-size: 24;" height="45" width="45" rotate="90" class="m-icon-round bg-[#0666eb] rounded-full text-white text-center opacity-0 mr-2" horizontalAlignment="right" @tap="toggleStatus"></Label>
             </GridLayout>
-            <CollectionView row="1" height="100%" :items="items" itemIdGenerator="index" :itemOverlap="`-${HEIGH_CARD - 60} 0 0 0`">
+            <CollectionView row="1" height="100%" :items="items" itemIdGenerator="index">
                 <template #default="{ item }">
-                    <GridLayout :height="item.expanded ? 2*HEIGH_CARD - 60 : HEIGH_CARD">
-                        <Card :height="HEIGH_CARD" :data="item" :sharedTransitionTag="`card_${item.id}`" @tap="toggleItemHeight(item)" verticalAlignment="top">
+                    <AbsoluteLayout :height="item.expanded ? HEIGH_CARD: 60">
+                        <Card :height="HEIGH_CARD" :data="item" :sharedTransitionTag="`card_${item.id}`" @tap="toggleItemHeight(item)" verticalAlignment="top" width="100%">
                         </Card>
-                    </GridLayout>
+                    </AbsoluteLayout>
                 </template>
             </CollectionView>
             <!-- <FlexboxLayout height="100%" marginTop="2" flexDirection="column">

demo-snippets/vue3/carddata.ts

@@ -8,41 +8,47 @@ export const dataCards: Card[] = [
         id: 1,
         name: 'Justine',
         number: '***** **** 0978',
+        backgroundColor:'red',
         bg: 'linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(245,144,2,1) 100%)',
         imgType: '~/assets/master-card.png'
     },
     {
         id: 2,
         name: 'Jenna',
         number: '***** **** 5782',
+        backgroundColor:'green',
         bg: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
         imgType: '~/assets/visa-card.png'
     },
     {
         id: 3,
         name: 'Jessica',
         number: '***** **** 1093',
+        backgroundColor:'blue',
         bg: 'linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
         imgType: '~/assets/master-card.png'
     },
     {
         id: 4,
         name: 'Justine',
         number: '***** **** 0978',
+        backgroundColor:'rgba(0,58,180,1)',
         bg: 'linear-gradient(90deg, rgba(0,58,180,1) 0%, rgba(0,29,29,1) 50%, rgba(0,144,2,1) 100%)',
         imgType: '~/assets/master-card.png'
     },
     {
         id: 5,
         name: 'Jenna',
         number: '***** **** 5782',
+        backgroundColor:'rgba(2,100,36,1)',
         bg: 'linear-gradient(90deg, rgba(2,100,36,1) 0%, rgba(9,109,121,1) 35%, rgba(0,212,255,1) 100%)',
         imgType: '~/assets/visa-card.png'
     },
     {
         id: 6,
         name: 'Jessica',
         number: '***** **** 1093',
+        backgroundColor:'rgba(134,193,195,1)',
         bg: 'linear-gradient(0deg, rgba(134,193,195,1) 0%, rgba(253,187,145,1) 100%)',
         imgType: '~/assets/master-card.png'
     }