You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to use the `child` snippet to render your own elements.
4
4
---
5
5
6
-
## Usage
6
+
The `child` snippet is a powerful feature that gives you complete control over the rendered elements in Bits UI components, allowing for customization while maintaining accessibility and functionality.
7
7
8
-
Many Bits UI components have a default HTML element that wraps their `children`. For example, `Accordion.Trigger` typically renders as:
8
+
## When to Use It
9
+
10
+
You should use the `child` snippet when you need:
11
+
12
+
- Svelte-specific features like transitions, animations, actions, or scoped styles
13
+
- Integration with custom components in your application
14
+
- Precise control over the DOM structure
15
+
- Advanced composition of components
16
+
17
+
## Basic Usage
18
+
19
+
Many Bits UI components have default HTML elements that wrap their content. For example, `Accordion.Trigger` renders a `<button>` element by default:
9
20
10
21
```svelte
11
-
<button>
22
+
<button {...props}>
12
23
{@render children()}
13
24
</button>
14
25
```
15
26
16
-
While you can set standard button attributes, you might need more control for:
17
-
18
-
- Applying Svelte transitions or actions
19
-
- Using custom components
20
-
- Scoped CSS
27
+
When you need to customize this element, the `child` snippet lets you take control:
21
28
22
-
This is where the `child` snippet comes in.
29
+
```svelte
30
+
<script lang="ts">
31
+
import MyCustomButton from "$lib/components";
32
+
import { Accordion } from "bits-ui";
33
+
</script>
23
34
24
-
Components supporting render delegation accept an optional child prop, which is a Svelte snippet. When used, the component passes its attributes to this snippet, allowing you to apply them to any element.
The `props` object includes event handlers, ARIA attributes, and any other attributes passed to `Accordion.Trigger`. Note that when using `child`, other children outside this snippet are ignored.
49
+
<style>
50
+
.scoped-button {
51
+
background-color: #3182ce;
52
+
color: #fff;
53
+
}
54
+
</style>
55
+
```
37
56
38
-
## Custom IDs & Attributes
57
+
In this example:
39
58
40
-
To use custom IDs, event handlers, or other attributes with a custom element, you must pass them to the component first. This is crucial because:
59
+
- The `props` parameter contains all necessary attributes and event handlers
60
+
- The `{...props}` spread applies these to your custom element/component
61
+
- You can add scoped styles, transitions, actions, etc. directly to the element
41
62
42
-
- Many Bits UI internals rely on specific IDs
43
-
- Props are merged using a [`mergeProps`](/docs/utilities/merge-props) function to handle cancelling internal handlers, etc.
<!-- your custom ID and event handler is now inside the `props` object -->
50
-
{#snippet child({ props })}
51
-
<div {...props}>Open accordion item</div>
52
-
{/snippet}
53
-
</Accordion.Trigger>
54
-
```
67
+
1. The component passes all internal props and your custom props passed to the component via the `props` snippet parameter
68
+
2. You decide which element receives these props
69
+
3. The component's internal logic continues to work correctly
55
70
56
-
In this example, `my-custom-id`, the click event handler, and my-custom-class are properly merged into the `props` object, ensuring they work alongside Bits UI's internal logic.
71
+
### Behind the Scenes
57
72
58
-
Behind the scenes, components using the child prop typically implement logic similar to this:
73
+
Components that support the `child` snippet typically implement logic similar to:
@@ -75,19 +91,64 @@ Behind the scenes, components using the child prop typically implement logic sim
75
91
{/if}
76
92
```
77
93
78
-
## Floating Content Components
94
+
## Working with Props
95
+
96
+
### Custom IDs & Attributes
97
+
98
+
To use custom IDs, event handlers, or other attributes, pass them to the component first:
99
+
100
+
```svelte
101
+
<Accordion.Trigger
102
+
id="my-custom-id"
103
+
data-testid="accordion-trigger"
104
+
onclick={() => console.log("clicked")}
105
+
>
106
+
{#snippet child({ props })}
107
+
<button {...props}>Open accordion item</button>
108
+
{/snippet}
109
+
</Accordion.Trigger>
110
+
```
111
+
112
+
The `props` object will now include:
79
113
80
-
Floating content components (tooltips, popovers, dropdowns, etc.) require special handling when used with the `child` snippet due to their positioning requirements with Floating UI.
114
+
- Your custom ID (`id="my-custom-id"`)
115
+
- Your data attribute (`data-testid="accordion-trigger"`)
116
+
- Your click event handler, properly merged with internal handlers
117
+
- All required ARIA attributes and internal event handlers
81
118
82
-
### Implementation Details
119
+
##Combining with Svelte Features
83
120
84
-
When implementing floating content, you must:
121
+
You can apply Svelte-specific features to your custom elements, such as transitions, actions, and scoped styles:
85
122
86
-
- Include a wrapper element within the `child` snippet
87
-
- Spread the `wrapperProps` prop to this wrapper element
Copy file name to clipboardExpand all lines: docs/content/components/accordion.md
+28-22Lines changed: 28 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,42 +18,48 @@ description: Organizes content into collapsible sections, allowing users to focu
18
18
19
19
## Overview
20
20
21
-
The Accordion component is a versatile UI element designed to manage large amounts of content by organizing it into collapsible sections. It's ideal for FAQs, settings panels, or any interface where users need to focus on specific information without being overwhelmed by visual clutter.
21
+
The Accordion component is a versatile UI element designed to organize content into collapsible sections, helping users focus on specific information without being overwhelmed by visual clutter.
22
22
23
-
## Key Features
24
-
25
-
-**Single or Multiple Mode**: Toggle between allowing one open section or multiple sections at once.
26
-
-**Accessible by Default**: Built-in ARIA attributes and keyboard navigation support.
27
-
-**Smooth Transitions**: Leverage CSS variables or Svelte transitions for animated expansions.
28
-
-**Flexible State**: Use uncontrolled defaults or take full control with bound values.
29
-
30
-
## Structure
31
-
32
-
The Accordion is a compound component made up of several sub-components:
33
-
34
-
-**`Root`**: Wraps all items and manages state.
35
-
-**`Item`**: Represents a single collapsible section.
36
-
-**`Header`**: Displays the title or label.
37
-
-**`Trigger`**: The clickable element that toggles the content.
38
-
-**`Content`**: The collapsible body of each item.
<Accordion.Content>Content for section 1 goes here.</Accordion.Content>
41
+
<Accordion.Content>This is the collapsible content for this section.</Accordion.Content>
53
42
</Accordion.Item>
54
43
</Accordion.Root>
55
44
```
56
45
46
+
## Key Features
47
+
48
+
-**Single or Multiple Mode**: Toggle between allowing one open section or multiple sections at once.
49
+
-**Accessible by Default**: Built-in ARIA attributes and keyboard navigation support.
50
+
-**Smooth Transitions**: Leverage CSS variables or Svelte transitions for animated open/close effects.
51
+
-**Flexible State**: Use uncontrolled defaults or take full control with bound values.
52
+
53
+
## Structure
54
+
55
+
The Accordion is a compound component made up of several parts:
56
+
57
+
-`Accordion.Root`: Container that manages overall state
58
+
-`Accordion.Item`: Individual collapsible section
59
+
-`Accordion.Header`: Contains the visible heading
60
+
-`Accordion.Trigger`: The clickable element that toggles content visibility
61
+
-`Accordion.Content`: The collapsible body content
62
+
57
63
## Reusable Components
58
64
59
65
To streamline usage in larger applications, create custom wrapper components for repeated patterns. Below is an example of a reusable `MyAccordionItem` and `MyAccordion`.
0 commit comments