Skip to content

rashad-yusifov/vue-nuxt-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

v-accordion

If you want install only package

npm i vue-nuxt-accordion --save

You will make the add-ons yourself, you can download the repository.

https://github.com/Rashad-Yusifov/vue-nuxt-accordion

How to use component ? (example)

<template>
     <V-accordion>
          <template v-slot:title>
            <span
             style="color: white"
              >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
              feugiat velit feugiat quis. In.</span
            >
          </template>
          <template v-slot:content>
            <span style="color: white">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit
              consequuntur quasi sapiente vero? Possimus similique nesciunt nostrum
              temporibus quia vitae corrupti recusandae magni corporis hic modi rem
              doloribus ea id, ad distinctio qui quis accusamus accusantium animi
              veniam.
            </span>
          </template>
    </V-accordion>
</template>

<script>
import Vaccordion from 'v-accordion';
export default {
  components: {
    'V-accordion': Vaccordion
  }
}
</script>

Accepted slots property (TITLE) | required

<template v-slot:title>
        <span
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          feugiat velit feugiat quis. In.</span>
 </template>

Accepted slots property (accordion content) | required

<template v-slot:content>
    <span >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit
        illo repellat quod recusandae expedita? Porro exercitationem
        aspernatur repellat earum voluptates aliquam blanditiis ut, inventore.
    </span>
</template>

Accepted slots property (Custom arrow icon)

<template v-slot:icon>
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="white"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
 </template>

Thanks for downloading.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published