@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.
Readme
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 |
interaction | interaction | Specifies if the component is triggered from the caller on mouseover or click event | "click" | "mouseover" | undefined | '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" | 'fixed' |
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 |
| 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-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. |
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 302 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 2 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.