docs: add collapsible animation instructions
This commit is contained in:
parent
22e353b9de
commit
c0b7cf6a0a
|
|
@ -11,10 +11,45 @@ primitive: https://www.radix-vue.com/components/collapsible.html
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
|
||||||
|
### Run the following command
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add collapsible
|
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
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user