JSPM

vue-nuxt-accordion

1.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 20
  • Score
    100M100P100Q49778F
  • License ISC

This is simple Accordion box for Vue & Nuxt - JS

Package Exports

  • vue-nuxt-accordion

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-nuxt-accordion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.