https://github.com/kunukn/vue-collapse
Height Collapsible component for Vue 3+ using CSS transitions
https://github.com/kunukn/vue-collapse
Last synced: about 1 month ago
JSON representation
Height Collapsible component for Vue 3+ using CSS transitions
- Host: GitHub
- URL: https://github.com/kunukn/vue-collapse
- Owner: kunukn
- License: mit
- Created: 2023-01-30T20:12:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-12T13:07:59.000Z (3 months ago)
- Last Synced: 2025-03-26T06:11:15.844Z (about 2 months ago)
- Language: Vue
- Size: 614 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Collapse
Collapsible component with CSS transition for elements with variable and dynamic height.
[](https://www.npmjs.com/package/@kunukn/vue-collapse)
[](https://www.npmjs.com/package/@kunukn/vue-collapse)
[](https://bundlephobia.com/result?p=@kunukn/vue-collapse)
[](https://github.com/kunukn/vue-collapse/blob/master/LICENSE)
vue-collapse
# Demo
Codesandbox simple Vue 3
View
Edit
# Tiny library
| name | size | gzip |
| -------------------- | ------- | ------- |
| vue-collapse.css | 0.43 kB | 0.21 kB |
| vue-collapse.js | 2.11 kB | 0.91 kB |
| vue-collapse.umd.cjs | 1.71 kB | 0.86 kB |
# CSS required
:warning: ️You need to add the CSS file.
```js
import '@kunukn/vue-collapse/style' // this imports the vue-collapse.css file.
```
or CDN
```html
```
or manually copy the content from the `vue-collapse.css` file to your app.
To alter the timing, you can use the `transition` prop. Or add custom CSS.
```HTML
[data-vue-collapse-transition] {
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
```
## Supported versions
Vue 3
## Install
```bash
npm install @kunukn/vue-collapse
```
## Import
```js
import '@kunukn/vue-collapse/style'
import { VueCollapse } from '@kunukn/vue-collapse'
```
## Attribute options
There are four possible states: `collapsed`, `collapsing`, `expanded`, `expanding`.
Click: to see the attributes
| Attribute | Type | Default | About |
| ------------- | -------- | ------- | --------------------------------------------------- |
| :when | boolean | falsy | should component collapse? |
| :as | string | div | element type to render |
| transition | string | falsy | apply custom CSS transition, see demo example below |
| @collapse() | function | | event emitted with component in this state |
| @collapsing() | function | | event emitted with component in this state |
| @expanded() | function | | event emitted with component in this state |
| @expanding() | function | | event emitted with component in this state |
| @event(state) | function | | event emitted with one of the 4 states |
| @init(state) | function | | component mount event emitted with current state |
## Usage examples
Click: Simple version using ARIA
```vue
{{ display }}
I know the state: {{ state }}. Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
import { VueCollapse } from '@kunukn/vue-collapse'
import { ref } from 'vue'
const isCollapsed = ref(false)
const display = ref('')
const onEvent = (state) => {
display.value = 'event ' + state
}
/* Custom easing */
.vue-collapse[data-vue-collapse-transition] {
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
```
# CDN
https://unpkg.com/@kunukn/vue-collapse/
# Supported browsers
Modern browsers that can CSS transition on `grid-template-rows`.
# Design goals
Click: to see design goals
- Minimal in file size
- Let the browser handle the animation using CSS transition
- Minimalistic API
- Flexible - provide your own markup, styling and easing
- Interruptible - can be reversed during movement
- Inert - when collapsed you should tab over the collapsed component
- Availability - from CDN or npm install
- Collapsible on height only