Skip to main content

align

Description

Optional. Defines how the dropdown is aligned horizontally relative to the input field

Usage

align?: "start" | "center" | "end";

Values

  • "start" - (default) the dropdown is aligned to the bottom left of the input
  • "center" – the dropdown is horizontally centered relative to the input field
  • "end" – the dropdown is aligned to the right edge of the input field.

Example

<script>
import { Dropdown, Calendar, Text } from "@svar-ui/svelte-core";

let popup;

</script>

{#if popup }
<Dropdown position={"top"} align={"center"}>
<Calendar value={new Date(2023, 2, 15)} />
</Dropdown>
{/if}

Related article: Positioning and aligning Dropdown