https://github.com/kunukn/vue-height-collapsible
vue-height-collapsible
https://github.com/kunukn/vue-height-collapsible
Last synced: 6 months ago
JSON representation
vue-height-collapsible
- Host: GitHub
- URL: https://github.com/kunukn/vue-height-collapsible
- Owner: kunukn
- License: mit
- Created: 2021-03-11T09:33:47.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-24T22:46:32.000Z (almost 2 years ago)
- Last Synced: 2024-04-27T03:02:53.758Z (about 1 year ago)
- Language: JavaScript
- Size: 934 KB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue HeightCollapsible
Collapsible component with CSS transition for elements with variable and dynamic height.
[](https://www.npmjs.com/package/vue-height-collapsible)
[](https://www.npmjs.com/package/vue-height-collapsible)
[](https://bundlephobia.com/result?p=vue-height-collapsible)
[](https://github.com/kunukn/vue-height-collapsible/blob/master/LICENSE)
Vue HeightCollapsible
## Demo
Codesandbox simple Vue
View
Edit
Codesandbox multiple Vue
View
Edit
Codesandbox simple Vue 3
View
Edit
# CSS required
:warning: ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.
```html
[data-height-collapsible] {
transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
```
Alternatively you can add it using the `transition` prop.
## Supported versions
### Vue 2 and Vue 3
```bash
npm install vue-height-collapsible
// or yarn install vue-height-collapsible
```
### Vue 2
```vue
import HeightCollapsible from "vue-height-collapsible";
```
### Vue 3
```vue
import HeightCollapsible from "vue-height-collapsible/vue3";
```
### Alternative approach
The source file could be copied. It is only this file.
`vue-height-collapsible.vue`
## Usage example
### Simple
```vue
Toggle
Paragraph of text.
Another paragraph is also OK.
import HeightCollapsible from 'vue-height-collapsible'
export default {
name: 'MyComponent',
components: {
HeightCollapsible,
},
data() {
return {
isOpen: true,
}
},
}
```
### Using Aria and scoped slots
```vue
Toggle {{ collapseState }}
I know the collapse state: {{ state }}
Paragraph of text.
Another paragraph is also OK.
Images and any other content are ok too.
import HeightCollapsible from 'vue-height-collapsible'
export default {
name: 'MyComponent',
components: {
HeightCollapsible,
},
data() {
return {
isOpen: true,
collapseState: '',
}
},
methods: {
onUpdate({ state }) {
this.collapseState = state
},
},
}
```
## Properties
| Prop | Type | Default |
| ------------------ | ------- | ------- |
| isOpen | boolean | true |
| transition | string | |
| tag | string | div |
| overflowOnExpanded | boolean | false |
#### `isOpen` : boolean
Expands or collapses content.
#### `transition` : string
You can also specify a CSS transition inline by using the `transition` prop.
```html
Paragraph of text
```
#### `tag` : string
You can specify the HTML element type for the collapse component. By default the element type is a `div` element.
```html
Paragraph of text
```
#### `overflowOnExpanded` : boolean
If added, then `overflow: hidden` inline style will not be added when the state is `expanded`.
# npm
https://www.npmjs.com/package/vue-height-collapsible
# CDN files
To see all the available CDN files go to
https://unpkg.com/browse/vue-height-collapsible/
# Design goals
- let the browser handle the animation using CSS height transition
- minimal in file size
- minimalistic API - only have a Collapsible component which updates on isOpen props
- 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, commonjs, minified or ES module
- collapsible on height only
# This was created with heavy inspiration from
https://github.com/kunukn/react-collapse
# Development
The compiler in this repository works for Vue 2 version.
This library was created using https://github.com/team-innovation/vue-sfc-rollup