Disclosure

Uses AutoAnimate underneath.

Triggers

Button

<VelvetDisclosure>
  <:trigger as |disclosure|>
    <disclosure.Button>
      Toggle Content
    </disclosure.Button>
  </:trigger>
  <:content>
    <div class="bg-violet-500/25 h-52 mt-4 rounded-md"></div>
  </:content>
</VelvetDisclosure>

Icon Button

Press the icon button on the right to toggle the content.

<VelvetDisclosure>
  <:trigger as |disclosure|>
    <div class="flex items-center">
      <div class="grow">
        Press the icon button on the right to toggle the content.
      </div>
      <disclosure.IconButton />
    </div>
  </:trigger>
  <:content>
    <div class="bg-violet-500/25 h-52 mt-4 rounded-md"></div>
  </:content>
</VelvetDisclosure>

Custom

Toggle Content

<VelvetDisclosure>
  <:trigger as |disclosure|>
    <VelvetSwitch @onChange={{disclosure.toggle}}>
      Toggle Content
    </VelvetSwitch>
  </:trigger>
  <:content>
    <div class="bg-violet-500/25 h-52 mt-4 rounded-md"></div>
  </:content>
</VelvetDisclosure>

Examples

Disabling Animations

Edit this demo

Use the @shouldAnimate argument to enable/disable animations.

Animate

<DemoSpaceY>
  <VelvetSwitch @isChecked={{this.shouldAnimate}} @onChange={{this.onChange}}>
    Animate
  </VelvetSwitch>

  <VelvetDisclosure @shouldAnimate={{this.shouldAnimate}}>
    <:trigger as |disclosure|>
      <disclosure.Button>
        Toggle Content
      </disclosure.Button>
    </:trigger>
    <:content>
      <div class="bg-violet-500/25 h-52 mt-4 rounded-md"></div>
    </:content>
  </VelvetDisclosure>
</DemoSpaceY>

Signature

Element

HTMLDivElement

Blocks

Name	Description	Type
`:content` *	The content of the disclosure.	`[publicAPI: PublicAPI]`
`:trigger` *	The trigger of the disclosure.	`[publicAPI: PublicAPI & { Button: WithBoundArgs<typeof VelvetButton, 'isDisclosure' \| 'isExpanded' \| 'onClick'>; IconButton: WithBoundArgs<typeof VelvetIconButton, 'onClick'>; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@shouldAnimate`	Indicate if the disclosed content should animate.	`boolean`	`true`

Arguments marked with * are required.