https://github.com/azurewarth0920/vue-functional-accordion

A functional accordion component of Vue.js.
https://github.com/azurewarth0920/vue-functional-accordion

accordion functional functional-component typescript vue

Last synced: 10 days ago
JSON representation

A functional accordion component of Vue.js.

• Host: GitHub
• URL: https://github.com/azurewarth0920/vue-functional-accordion
• Owner: Azurewarth0920
• License: mit
• Created: 2020-06-08T14:19:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:58:24.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T22:03:15.798Z (6 months ago)
• Topics: accordion, functional, functional-component, typescript, vue
• Language: TypeScript
• Size: 1.26 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-functional-accordion

A functional accordion component of Vue.js.

## demo

```

npm install

# then

npm run dev

# then you can check the demo at localhost:1234 (if port 1234 is available).

```

## installation

```

$ npm install --save vue-functional-accordion

# or

$ yarn add vue-functional-accordion

```

## useage

Just import as a vue component.

```Vue

  


    change status

    

      

        
Title

        
Contents.

        
Contents.

        
Contents.

        
Contents.

      

    

  


import AppAccordion from '../src/index.tsx'

export default {

  components: {

    AppAccordion

  },

  data() {

    return {

      status: false

    }

  }

}

```

## props

* status - Boolean, required

The status of the accordion. wheather it is shown or hide.

* duration - String, optional, default: `0.5s`

The duration of accordion animation.

* timingFunction - String, optional, default: `cubic-bezier(0.44, 0.03, 0.14, 0.98)`

The timing function of accordion animation.