Dropdown

Toggleable, contextual overlays for displaying additional details or actions. Must be wrapped with a DropdownShell for correct behavior.

Showcase

Source

<DropdownShell let:toggle>
  <Button on:click={toggle}>
    I toggle a dropdown
    <ChevronDownIcon size="24" class="ml dropdown-chevron" />
  </Button>
  <Dropdown>
    <div class="padded">
      and I am the dropdown content
    </div>
  </Dropdown>
</DropdownShell>
<DropdownShell let:toggle>
  <Button on:click={toggle}>
    look up there
  </Button>
  <Dropdown verticalAlignment="top">
    <div class="padded">
      right here
    </div>
  </Dropdown>
</DropdownShell>
<DropdownShell let:toggle>
  <Button on:click={toggle}>
    look up if there is enough space
  </Button>
  <Dropdown verticalAlignment="auto-top">
    <div class="padded">
      hello!
    </div>
  </Dropdown>
</DropdownShell>

Properties #

Style Properties

Name	Default	Type	Description
`horizontalAlignment`	`auto-start`	`auto-start` \| `auto-end` \| `start` \| `end`	Dropdown content alignment on horizontal axis.
`verticalAlignment`	`auto-bottom`	`auto-bottom` \| `auto-top` \| `bottom` \| `top`	Dropdown content alignment on vertical axis.
~~`right`~~	`false`	`boolean`	`DEPRECATED` Aligns the dropdown content with the right edge of the shell.
~~`top`~~	`false`	`boolean`	`DEPRECATED` Aligns the dropdown content such that it opens to the top of the shell, extending up.

Class Properties

All <Dropdown> components use the .dropdown 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.

Slots #

Default slot

The content of the dropdown.

Related Objects

The following objects are available as named exports in 'attractions/dropdown'.

HorizontalAlignment

Dropdown alignment along the horizontal axis.

Field	Description
`AUTO_START`	Align the dropdown based on available space around, preferably, at text start (left edge for LTR languages).
`AUTO_END`	Align dropdown based on available space around, preferably, at text end (right edge for LTR languages).
`START`	Align content start
`END`	Align content end.

VerticalAlignment

Dropdown alignment along the vertical axis.

Field	Description
`AUTO_BOTTOM`	Align content based on available space, preferable bottom.
`AUTO_TOP`	Align content based on available space, preferable top.
`BOTTOM`	Align content bottom.
`TOP`	Align content top.

SCSS Variables #

Name	Description	Default
`$background`	The background color of the dropdown content	#FFFFFF
`$shadow-raised`	The shadow of the dropdown.	hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
`$card-radius`	The curvature radius of the dropdown.	`1.25em`