docs: add collapsible animation instructions

This commit is contained in:
Lucas Goyeche 2023-11-25 02:08:25 -03:00
parent 22e353b9de
commit c0b7cf6a0a

View File

@ -11,10 +11,45 @@ primitive: https://www.radix-vue.com/components/collapsible.html
## Installation
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add collapsible
```
### Update `tailwind.config.js`
Add the following animations to your `tailwind.config.js` file:
```js title="tailwind.config.js" {5-18}
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
'collapsible-down': {
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
},
'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
},
},
animation: {
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
},
},
},
}
```
</Steps>
## Usage
```vue