Dropdown<mds-dropdown>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
interactionenumSpecifies if the component is triggered from the caller on mouseover or click event
placementenumSpecifies where the component should be placed relative to the caller.
strategyenumSets the CSS position strategy of the component.
backdropbackdropbooleanSpecifies if the component has a backdrop background
disableAutoPlacementdisableAutoPlacementbooleanIf set, the component will not be placed automatically near it's caller.
disableShiftdisableShiftbooleanIf set, the component will not be kept inside the viewport.
disableSmoothdisableSmoothbooleanIf set, the component will not follow the caller smoothly when the page scrolls.
flipflipbooleanSpecifies the placement of the component if no space is available where it is placed.
hideArrowhideArrowbooleanIf set, the component will not have an arrow pointing to the caller.
visiblevisiblebooleanSpecifies the visibility of the component.
targetstringSpecifies the selector of the target element, this attribute is used with querySelector method.
arrowPaddingnumberSets the distance between arrow and dropdown margins.
offsetnumberSets distance between the dropdown and the caller.
shiftPaddingnumberSets a safe area distance between the dropdown and the viewport.
zIndexnumberSpecifies the visibility of the component.
Panoramica
The <mds-dropdown> web component is a floating overlay surface of the Magma Design System that anchors arbitrary slotted content next to an external trigger element. It has no built-in trigger of its own: it attaches to a separate caller resolved via target and positions, flips and shifts itself around that element.
Semantic Behavior
Caller binding: The dropdown does not render a trigger; it resolves its caller from the target selector and wires the chosen interaction onto that external element. Changing target re-binds the caller.Visibility is the single source of truth: The visible prop drives the whole lifecycle - it positions the floating element, optionally shows the backdrop, and emits the events; setting it back to false dismisses it.Outside-click dismissal: While open, clicking outside both the host and the caller closes the dropdown.Escape to close: Pressing Escape hides the dropdown, and hands the focus back to the caller when the panel was holding it.Keyboard, when the panel is a menu: the arrows on the caller open the panel and land on the first entry (Up on the last), Enter does the same; inside the panel the arrows walk the entries and wrap at the ends, Home and End go to the first and to the last, Tab closes and lets the focus leave from the caller. A panel that declares another role is left alone: the arrows of a calendar or of a form belong to what the panel holds.Backdrop: When backdrop is set, a backdrop is shown while the dropdown is visible and removed on close.Emitted events: mdsDropdownChange fires on every visibility transition; mdsDropdownVisible and mdsDropdownHide fire on open and close respectively. Each detail carries the resolved caller and the current visible state.Default slot is the panel content: Anything in the default slot (text, HTML, or other components) is the surface shown when the dropdown is triggered.ARIA wiring: The panel declares itself a menu and names the elements the slot receives as its entries (role="menuitem", a role of their own other than button being left alone); the caller receives aria-haspopup, an aria-controls pointing at the panel and an aria-expanded that follows visible. A panel that is not a list of actions declares its own role in the markup and keeps it, its contents then being left alone. A caller that exposes no role of its own - a generic host that keeps its control inside its shadow root, such as mds-tab-item - is left unwired, none of those attributes being valid on it.
Properties & Visual Configurations
interaction decides how the caller opens the panel: 'click' toggles on caller click (with outside-click and Escape dismissal), 'mouseover' opens on hover and closes on mouse leave, and 'none' wires nothing on the caller, so visibility is controlled programmatically through visible (an open panel still closes on outside click and Escape).target (required) is the CSS selector of the external element the dropdown attaches to and positions against.
Other behavioral props
placement sets the side relative to the caller, honored only with disableAutoPlacement: by default the side with the most space is chosen automatically. flip allows falling back to the opposite side when space runs out, and works only together with disableAutoPlacement. The panel is shifted to stay inside the viewport with a safe margin by default - disableShift opts out of this and shiftPadding tunes the margin.offset controls the gap between the panel and the caller; the pointer toward the caller is shown by default (hideArrow removes it) and arrowPadding insets it from the panel edges.the panel tracks the caller smoothly as the page scrolls by default (disableSmooth opts out); strategy chooses the CSS positioning mode ('absolute' vs 'fixed') and zIndex sets the stacking order.