@maggioli-design-system/mds-dropdown

Package Overview

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

@maggioli-design-system/mds-dropdown

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.

latest

npm

Version: 5.8.3

Version published: 4 months ago

Maintainers: 3

Created: 3 years ago

Source

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

FAQs

Package last updated on 03 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@maggioli-design-system/mds-dropdown

mds-dropdown

Best practices of usage

Properties

Events

Slots

CSS Custom Properties

Dependencies

Used by

Graph

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases