Skip to content

Commit

Permalink
collapsible
Browse files Browse the repository at this point in the history
  • Loading branch information
@k11q
k11q committed Jul 15, 2023
1 parent 4c3fafb commit 533434e
Showing 1 changed file with 81 additions and 86 deletions.
167 changes: 81 additions & 86 deletions docs/content/components/collapsible.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ import HeroCodeGroup from '../../components/HeroCodeGroup.vue'
# Collapsible

<Description>
A modal dialog that interrupts the user with important content and expects a
response.
An interactive component which expands/collapses a panel.
</Description>

<HeroContainer>
Expand All @@ -38,40 +37,52 @@ response.
</template>
</HeroContainer>

'Full keyboard navigation.', 'Can be controlled or uncontrolled.'
## Features

<Highlights
:features="[
'Full keyboard navigation.',
'Can be controlled or uncontrolled.',
]"
/>

## Installation

Install the component from your command line.

```bash
npm install @radix-ui/react-collapsible
npm install radix-vue
```

## Anatomy

Import the components and piece the parts together.

```jsx
import * as Collapsible from '@radix-ui/react-collapsible';
```vue
<script setup>
import {
CollapsibleRoot,
CollapsibleTrigger,
CollapsibleContent,
} from "radix-vue";
</script>
export default () => (
<Collapsible.Root>
<Collapsible.Trigger />
<Collapsible.Content />
</Collapsible.Root>
);
<template>
<CollapsibleRoot>
<CollapsibleTrigger />
<CollapsibleContent />
</CollapsibleRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a collapsible.
Contains all the parts of a collapsible

<!--
<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
Expand All @@ -88,35 +99,18 @@ Contains all the parts of a collapsible.
{
name: 'open',
type: 'boolean',
description: (
<span>
The controlled open state of the collapsible. Must be used in
conjunction with <Code>onOpenChange</Code>.
</span>
),
},
{
name: 'onOpenChange',
type: '(open: boolean) => void',
typeSimple: 'function',
description:
'Event handler called when the open state of the collapsible changes.',
description: '<span>The controlled open state of the collapsible. Must be binded with <Code>v-model</Code>.</span>',
},
{
name: 'disabled',
type: 'boolean',
description: (
<span>
When <Code>true</Code>, prevents the user from interacting with the
collapsible.
</span>
),
description: '<span>When <Code>true</Code>, prevents the user from interacting with the collapsible.</span>',
},
]}
]"
/>

<DataAttributesTable
data={[
:data="[
{
attribute: '[data-state]',
values: ['open', 'closed'],
Expand All @@ -125,27 +119,27 @@ Contains all the parts of a collapsible.
attribute: '[data-disabled]',
values: 'Present when disabled',
},
]}
]"
/>
-->

### Trigger

The button that toggles the collapsible.
<!--
The button that toggles the collapsible

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
type: 'boolean',
default: 'false',
description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
},
]}
]"
/>

<DataAttributesTable
data={[
:data="[
{
attribute: '[data-state]',
values: ['open', 'closed'],
Expand All @@ -154,15 +148,15 @@ The button that toggles the collapsible.
attribute: '[data-disabled]',
values: 'Present when disabled',
},
]}
]"
/>
-->

### Content

The component that contains the collapsible content.
<!--

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
Expand All @@ -176,11 +170,11 @@ The component that contains the collapsible content.
description:
'Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.',
},
]}
]"
/>

<DataAttributesTable
data={[
:data="[
{
attribute: '[data-state]',
values: ['open', 'closed'],
Expand All @@ -189,11 +183,11 @@ The component that contains the collapsible content.
attribute: '[data-disabled]',
values: 'Present when disabled',
},
]}
]"
/>

<CssVariablesTable
data={[
:data="[
{
cssVariable: '--radix-collapsible-content-width',
description: 'The width of the content when it opens/closes',
Expand All @@ -202,58 +196,60 @@ The component that contains the collapsible content.
cssVariable: '--radix-collapsible-content-height',
description: 'The height of the content when it opens/closes',
},
]}
]"
/>
-->

## Examples

### Animating content size

Use the `--radix-collapsible-content-width` and/or `--radix-collapsible-content-height` CSS variables to animate the size of the content when it opens/closes. Here's a demo:

```jsx line=8
// index.jsx
import * as Collapsible from '@radix-ui/react-collapsible';
```vue line=10
// index.vue
<script setup>
import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "radix-vue";
import './styles.css';
</script>
export default () => (
<Collapsible.Root>
<Collapsible.Trigger>…</Collapsible.Trigger>
<Collapsible.Content __className__="CollapsibleContent">
<template>
<CollapsibleRoot>
<CollapsibleTrigger>…</CollapsibleTrigger>
<CollapsibleContent class="CollapsibleContent">
…
</Collapsible.Content>
</Collapsible.Root>
);
</CollapsibleContent>
</CollapsibleRoot>
</template>
```

```css line=17,23
/* styles.css */
.CollapsibleContent {
overflow: hidden;
overflow: hidden;
}
.CollapsibleContent[data-state='open'] {
animation: slideDown 300ms ease-out;
.CollapsibleContent[data-state="open"] {
animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state='closed'] {
animation: slideUp 300ms ease-out;
.CollapsibleContent[data-state="closed"] {
animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
from {
height: 0;
}
to {
height: var(__--radix-collapsible-content-height__);
}
from {
height: 0;
}
to {
height: var(__--radix-collapsible-content-height__);
}
}

@keyframes slideUp {
from {
height: var(__--radix-collapsible-content-height__);
}
to {
height: 0;
}
from {
height: var(__--radix-collapsible-content-height__);
}
to {
height: 0;
}
}
```

Expand All @@ -262,17 +258,16 @@ export default () => (
Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).

### Keyboard Interactions
<!--

<KeyboardTable
data={[
:data="[
{
keys: ['Space'],
description: 'Opens/closes the collapsible.',
description: 'Opens/closes the collapsible',
},
{
keys: ['Enter'],
description: 'Opens/closes the collapsible.',
description: 'Opens/closes the collapsible',
},
]}
]"
/>
-->

0 comments on commit 533434e

Please sign in to comment.