Components

  • DropDown-Base

    A basic dropdown built with conditional visibility for dropdowns that will not require dynamic change of alignment or position of the popover. This can be used for normal dropdowns or combo-boxes that require interaction within the popover without closing it.

    Alignment:

    Position

    Clickable

    Offset

    Attributes

    alignment (String) CSS property to align the popover to the button position. In a LTR interface start: left, center, end: right
    clickable (Boolean) Set it to "true" if you need to allow the user to interact with the content within the popover like search, multi-select, scroll, etc. Set it to false if you need to hide the popover after the first click on the content.
    offset (String) The distance between the button and the popover. Always take into account the height of the button so the popover doesn't overlap.
    position (String) The position of the popover. This can be on top or bottom of the button.

    Slots

    Default Add to this slot the button or trigger that will be visible in the interface for the user to click for show/hide the popover.
    Popover Add to this slot the popover content that will be visible once the dropdown is expanded.

  • DropDown-Dynamic

    A dropdown that relies on the popover API. This dropdown measures the size of the popover and calculates the position of the button within the screen to prevent the popover to be displayed outside the view port. Positioning the popover on top or bottom and left or right of the button.

    Since this dropdown uses the popover API, you will be able to use it in tables without any overlapping of the content or rows.

    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content
    Cell content

    Attributes

    vertical_offset (Integer) This is the distance between the border of the button and the start of the popover. The size needs to be given as an integer (4, 6, 8) and not as a string ("4px", "6px", "8px").

    Slots

    Default Add to this slot the button or trigger that will be visible in the interface for the user to click for show/hide the popover.
    Popover Add to this slot the popover content that will be visible once the dropdown is expanded.