search

huntabyte / bits-ui

The headless components for Svelte.
https://bits-ui.com
MIT License
1.19k stars 86 forks source link

accordion initial open state #627

Closed nicolaiunrein closed 2 months ago

nicolaiunrein commented 2 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

First and foremost, thank you for your effort of making the web a little bit more sane! :D I really enjoy working with bits-ui melt and shadcn-svelte. I would like to build an accordion with the multiple prop set but I want to start with all items expanded. It seems that currently there is no straight forward way to do this. At least I could not find anything in the docs. I imagine something like an "open" prop on the Accordion.Item or Accordion.Trigger. Thanks again!

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

huntabyte commented 2 months ago

Hey there, you need to pass all the values of the items you want to be open as the value prop to Accordion.Root

<script>
    import { Accordion } from 'bits-ui'
    const items = ['a','b','c']
</script>

<Accordion.Root bind:value={items}>
    <!-- ... -->
</Accordion.Root>
nicolaiunrein commented 2 months ago

Hey, thanks for the prompt reply. I came to the same solution yesterday after looking at the types more closely. I think what confused me was that in the docs the type of value is string | undefined.

image