@maggioli-design-system/mds-dropdown

v5.8.3

Published

6 months ago

mds-dropdown is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

0High
0Medium
0Low

vitto

moodysmiles

nicola.tamburini.maggioli

mds-dropdown

Best practices of usage

There are many situations where the component should be placed on the surface of the document:

<body>
  <mds-dropdown target="ui-content">
    <mds-text>Dropdown contents</mds-text>
  </mds-dropdown>
  <div>
    <mds-text>Deep contents</mds-text>
    <div>
      <mds-text id="ui-content">Deeper contents</mds-text>
    </div>
  </div>
</body>

The next use case couldn't be rendered correctly depending by relative/absolute/etc. positioning and strategy attribute mix.

<body>
  <div>
    <mds-text>Deep contents</mds-text>
    <div>
      <mds-text id="ui-content">Deeper contents</mds-text>
      <mds-dropdown target="ui-content">
        <mds-text>Dropdown contents</mds-text>
      </mds-dropdown>
    </div>
  </div>
</body>

Affected problems:

Wrong backdrop render
Wrong mds-dropdown positioning

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | arrow | arrow | If set, the component will have an arrow pointing to the caller. | boolean | true | | arrowPadding | arrow-padding | Sets the distance between arrow and dropdown margins. | number | 24 | | autoPlacement | auto-placement | If set, the component will be placed automatically near it's caller. | boolean | false | | backdrop | backdrop | Specifies if the component has a backdrop background | boolean \| undefined | false | | flip | flip | Specifies the placement of the component if no space is available where it is placed. | boolean | false | | interaction | interaction | Specifies if the component is triggered from the caller on mouseover or click event | "click" \| "mouseover" \| "none" | 'click' | | offset | offset | Sets distance between the dropdown and the caller. | number | 24 | | placement | placement | Specifies where the component should be placed relative to the caller. | "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" | 'bottom' | | shift | shift | If set, the component will be kept inside the viewport. | boolean | true | | shiftPadding | shift-padding | Sets a safe area distance between the dropdown and the viewport. | number | 24 | | smooth | smooth | If set, the component will follow the caller smoothly, visible when the page scrolls. | boolean | true | | strategy | strategy | Sets the CSS position strategy of the component. | "absolute" \| "fixed" | 'absolute' | | target (required) | target | Specifies the selector of the target element, this attribute is used with querySelector method. | string | undefined | | visible | visible | Specifies the visibility of the component. | boolean | false | | zIndex | z-index | Specifies the visibility of the component. | number | undefined |

Events

| Event | Description | Type | | -------------------- | --------------------------------------- | ------------------------------------- | | mdsDropdownChange | Emits when a modal is visible or hidden | CustomEvent<MdsDropdownEventDetail> | | mdsDropdownHide | Emits when a modal is hidden | CustomEvent<MdsDropdownEventDetail> | | mdsDropdownVisible | Emits when a modal is visible | CustomEvent<MdsDropdownEventDetail> |

Slots

| Slot | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------ | | "default" | Add text string, HTML elements or components to this slot, elements will be shown when the component is triggered. |

CSS Custom Properties

| Name | Description | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | --mds-dropdown-arrow-background | Sets the fill color of the arrow. | | --mds-dropdown-backdrop-duration | Sets the transition duration of the backdrop, used by component's code too. | | --mds-dropdown-backdrop-z-indx | Sets the backdrop z-index, used by component's code too. | | --mds-dropdown-background | Sets the background-color of the dropdown. | | --mds-dropdown-drop-shadow | Sets the drop-shadow of the dropdown. | | --mds-dropdown-duration | Sets the duration of the dropdown animation. | | --mds-dropdown-ease | Sets the easing of the dropdown animation. | | --mds-dropdown-mouseover-delay | Sets the delay duration of the component when the caller trigger mouseover event, it's used by the javascript code. | | --mds-dropdown-transform-from | Sets the from animation transform of the dropdown. | | --mds-dropdown-transform-to | Sets the to animation transform of the dropdown. | | --mds-dropdown-z-index | Sets the z-index of the component. |

Dependencies

Used by

Graph

graph TD;
  mds-input-date --> mds-dropdown
  mds-input-date-range --> mds-dropdown
  mds-policy-ai --> mds-dropdown
  mds-pref-language --> mds-dropdown
  style mds-dropdown fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme