Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@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 |
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 398 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).