DropdownShell

The container for the Dropdown and its activating handle.

Showcase

Useless without a <Dropdown />

Source

<DropdownShell let:toggle>
  <Button on:click={toggle}>
    this is the handle
    <ChevronDownIcon size="24" class="ml dropdown-chevron" />
  </Button>
  <Dropdown right>
    <div class="padded">
      and this is the dropdown
    </div>
  </Dropdown>
</DropdownShell>
<DropdownShell>
  Useless without a <code>&lt;Dropdown /&gt;</code>
</DropdownShell>

Properties #

Functional Properties

Name	Default	Type	Description
`open`	`false`	`boolean`	Controls whether the dropdown content is shown or hidden.

Class Properties

All <DropdownShell> components use the .dropdown-shell class.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the underlying `<div>` element.

Bonus: use the `.dropdown-chevron` class for the chevrons on the dropdown handle to get a nice rotation animation (see showcase).

Events #

Name	Event Detail	Description
`change`	`{ value }`	Fired when toggling the dropdown (with `value` being `true` for "open" and `false` for "closed").

Slots #

Default slot

The shell of the dropdown. The dropdown itself must be inside it.

Prop Name	Type	Description
`toggle`	`Function`	A callback to toggle the open state of the dropdown.

Exported Attributes #

These attributes can be accessed from variables holding component instances bound using bind:this on the instance.

Name	Type	Description
`toggle`	`Function`	Toggles the dropdown's "open" state. In addition to being exposed as a slot prop, this function is exported to allow toggling the dropdown from same component where the shell is created.