@maggioli-design-system/mds-dropdown
Advanced tools
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 JavaScirpt framework you are using.
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:
backdrop rendermds-dropdown positioningThis 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 JavaScirpt framework you are using.
| 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 | false |
flip | flip | Specifies the placement of the component if no space is available where it is placed. | boolean | false |
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" | 'fixed' |
target (required) | target | Specifies the id of the caller element. | string | undefined |
visible | visible | Specifies the visibility of the component. | boolean | false |
zIndex | z-index | Specifies the visibility of the component. | number | undefined |
| 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> |
| Slot | Description |
|---|---|
"default" | Add text string, HTML elements or components to this slot, elements will be shown when the component is triggered. |
| 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-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. |
Built with love @ Gruppo Maggioli from R&D Department
FAQs
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 JavaScirpt framework you are using.
The npm package @maggioli-design-system/mds-dropdown receives a total of 107 weekly downloads. As such, @maggioli-design-system/mds-dropdown popularity was classified as not popular.
We found that @maggioli-design-system/mds-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.