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

import { useState } from "react";
import { Dropdown, Calendar, Text } from "@svar-ui/react-core";

export default function Example() {
  const [popup, setPopup] = useState(false);

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

Related article: Positioning and aligning Dropdown