Skip to content

Commit

Permalink
docs: fix typo in delegation.md (#663)
Browse files Browse the repository at this point in the history
  • Loading branch information
robots4life authored Sep 18, 2024
1 parent 7f94f45 commit d22c6eb
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions sites/docs/content/delegation.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how to use the asChild prop to render your own elements.

## Usage

For certain components, we set a default underlying HTML element to wrap the `<slot/>` with. As a high level example, the `AccordionTrigger`, looks something like this:
For certain components, we set a default underlying HTML element to wrap the `<slot/>` with. As a high level example, the `Accordion.Trigger`, looks something like this:

```svelte
<button>
Expand All @@ -17,12 +17,12 @@ While we do allow you to set any attribute that you normally could on a button,

Each of the components that support render delegation have an optional prop called `asChild`. When set to `true`, the component will pass the `builder` as a slot prop, which you can then apply to the element of your choosing.

Let's take a look at an example using the `AccordionTrigger` component:
Let's take a look at an example using the `Accordion.Trigger` component:

```svelte
<AccordionTrigger asChild let:builder>
<Accordion.Trigger asChild let:builder>
<div use:builder.action {...builder}>Open accordion item</div>
</AccordionTrigger>
</Accordion.Trigger>
```

We're passing the Melt UI builder we would normally apply to the `<button>` as a prop which can then be applied to any element we want. Keep in mind, you will need to `use:builder.action`, as well as spread the builder props onto the element you're using to retain all functionality.
Expand Down

0 comments on commit d22c6eb

Please sign in to comment.