Top

Cards


Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

Inside Your template tags add

<div v-for="(item, index) in data" :key="index" :title="item.title" :desc="item.desc";>
                  <p class="mb-0" v-html="item.body"></p>
</div>

Inside Your script tags add

import { useAdvanceStore } from "@/store/advance"
                      const store = useAdvanceStore()
const data = store.card
                                             

Inside Your ts tags add

import { defineStore } from 'pinia'
                    import { ref } from 'vue'
                    import advance from "@/core/data/advance.json"
                    
                    interface cards {
                      title: string,
                      desc: string,
                      body: string
                  }
                    
                    export const useAdvanceStore = defineStore('advance', () => {
                    
                      const card: cards[] = (JSON.parse(JSON.stringify(advance.card)))
                        return {
                           
                          card
                            
                        }
                    })
                    

Inside Your json tags add

 {
                      "card": [
                      {
                        "title": "Basic Card",
                        "desc": "This is a simple basic card using anywhere.",
                        "body": "Tabs have long been used to show alternative views of the same group of information tabs in software. Known as“module tabs” , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire."
                      },
                      {
                        "title": "Flat Card",
                        "desc": "For flat cards, make the.b-r-0[border-radius:0]used class.",
                        "body": "A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate."
                      }
                    ],
  ],
                        }
                    
npm i vue-draggable-next

Inside Your template tags add

 <draggable class="row" >
<div class="col-sm-12  col-xl-6 " v-for="(element, index) in data" :key="index" >   
<div class="card" >
<div class="card-header pb-0" v-html="element.title"></div>
<div class="card-body">
<p v-text="element.description"></p>
</div>
</div>
</div> 
</draggable>

Inside Your script tags add

import { useAdvanceStore } from "@/store/advance"
import { VueDraggableNext } from 'vue-draggable-next'
const store = useAdvanceStore()
const data = store.draggable
const draggable = VueDraggableNext

Inside Your json tags add

 "draggable": [
 {
   "cardclass": "height-equal",
   "title": "Basic Card",
   "desc": "You can draggable cards anywhere.",
   "children": [
     {
       "title": "Logo Design"
     },
     {
       "title": "Web Designer"
     },
     {
       "title": "E-Commerce"
     },
     {
       "title": "UX Designer"
     }
   ]
 },
 {
   "cardclass": "height-equal",
   "title": "Default Card",
   "desc": "You can draggable cards anywhere.",
   "children": [
     {
       "activeclass": true,
       "title": "UI Kits"
     },
     {
       "title": "Wow Animations"
     },
     {
       "title": "Apex Charts"
     },
     {
       "title": "Starter Kits"
     }
   ]
 },
 {
   "cardclass": "b-r-0 height-equal",
   "title": "Flat Card",
   "desc": "You can draggable cards anywhere.",
   "children": [
     {
       "title": "PRODUCT"
     },
     {
       "title": "PRODUCT DETAILS"
     },
     {
       "title": "CART"
     },
     {
       "title": "CHECKOUT"
     }
   ]
 }
            ],

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'

import advance from "@/core/data/advance.json"
import draggablecard from "@/types/draggablecard"

export const useAdvanceStore = defineStore('advance', () => {
  const draggable: draggablecard[] = (JSON.parse(JSON.stringify(advance.draggable)))
return {
draggable,
}
})
Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

Inside Your template tags add

 <div v-for="(item, index) in data" :key="index" 
                  :title="item.heading" :desc="item.desc">
                  <p :class="item.bodyTextClass">{{ item.bodyText }}</p>
                  <p v-if="item.id == 1">Us Technology offers web & mobile development solutions for all industry
                      verticals.Include a short form
                      using fields that'll help your business understand who's contacting them.<br><strong>Visit Us: </strong>
                      2600 Hollywood Blvd,Florida, United States- 33020<br><strong>Mail
                          Us:</strong>contact@us@gmail.com<br><strong>Contact Number: </strong>(954) 357-7760</p>
                  <form v-else-if="item.id == 2">
                      <label class="form-label" for="exampleFormControlInput1">Email address</label>
                      <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="youremail@gmail.com">
                  </form>
                  </div>
                 

Inside Your script tags add

import { useAdvanceStore } from "@/store/advance"
                  const store = useAdvanceStore()
const data = store.position
                                         

Inside Your ts tags add

import { defineStore } from 'pinia'
                import { ref } from 'vue'
                import advance from "@/core/data/advance.json"
                
                import positioncard from "@/types/positioncard"
                
                export const useAdvanceStore = defineStore('advance', () => {
                
                  const position: positioncard[] = (JSON.parse(JSON.stringify(advance.positioncard)))
                    return {
                       
                      position
                        
                    }
                })
                

Inside Your json tags add

 {
 "positioncard": [
 {
   "id": 1,
   "borderClass": "pb-0 border-l-primary",
   "heading": "Border Left",
   "desc": "Use the class of.b-l-* for left border.",
   "bodyTextClass": ""
 },
 {
   "id": 2,
   "borderClass": "pb-0 border-r-secondary",
   "heading": "Border Right",
   "desc": "Use the class of.b-r-* for right border.",
   "bodyTextClass": "",
   "bodyText": "Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them."
 },
 {
   "id": 3,
   "borderClass": "pb-0 border-t-danger",
   "heading": "Border Top",
   "desc": "Use the class of.b-t-* for top border.",
   "bodyTextClass": "mb-0",
   "bodyText": "Tabs have long been used to show alternative views of the same group of information tabs in software. Known as“module tabs” , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire."
 },
 {
   "id": 4,
   "borderClass": "border-b-info",
   "heading": "Border Bottom",
   "desc": "Use the class of.b-b-* for bottom border.",
   "bodyTextClass": "mb-0",
   "bodyText": "A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate."
 }
                ],
                    }