docs: add collapsible animation instructions
This commit is contained in:
parent
22e353b9de
commit
c0b7cf6a0a
|
|
@ -10,11 +10,46 @@ 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user