Skip to main content

position

Description​

Optional. Defines the position of a dropdown relative to the input

Usage​

position?: string;

Parameters​

  • "bottom" (default) - the dropdown appears below the input element

  • "top" - the dropdown appears above the input element

  • "left" - the dropdown appears to the left side of the input element

  • "right" - the dropdown appears to the right side of the input element

Example​

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

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

  const onCancel = () => {
    setPopup(false);
  };

  return (
    <div className="datepicker" onClick={() => setPopup(true)}>
      <Text />

      {popup && (
        <Dropdown onCancel={onCancel} position={"top"} align={"center"}>
          <Calendar value={new Date(2023, 2, 15)} />
        </Dropdown>
      )}
    </div>
  );
}
.datepicker {
    position: relative;
    width: 300px;
}

Related article: Positioning and aligning Dropdown