Accordion timer item<mds-accordion-timer-item>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à
typographyenumSpecifies the typography of the element
selectedselectedbooleanSpecifies if the accordion item is opened or not
descriptionstringSpecifies the title shown when the accordion is closed or opened
durationnumberSpecifies the duration of the single component when selected, it overrides the global duration of itself only
progressnumberA value between 0 and 100 that rapresents the status progress
uuidnumberUsed automatically by MdsAccordionTimer wrapper to handle it's siblings
Panoramica
The <mds-accordion-timer-item> web component is the single collapsible panel of a timed, auto-advancing accordion, designed to live exclusively inside its parent <mds-accordion-timer>. It renders a header button paired with a progress bar and a region that reveals the slotted content while the item is selected.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-accordion-timer>, alongside other <mds-accordion-timer-item> siblings. It is not used standalone or mixed with other child types, since the parent drives the rotating timer across the items.Selection is parent-orchestrated: selected represents the open state, but only one sibling is open at a time - the parent advances selection on the timer or on a user click.Click toggles and reports up: Clicking the header toggles selected and, when opening, emits mdsAccordionTimerItemClickSelect so the parent can pause and re-anchor its timer on this item.Programmatic selection: Setting selected to true emits mdsAccordionTimerItemSelect, and the parent restarts the countdown from the beginning of that item. A click changes selected too, so it emits this event as well, just before mdsAccordionTimerItemClickSelect.Hover pauses the countdown: While selected, pointer enter/leave emit mdsAccordionTimerItemMouseEnterSelect / mdsAccordionTimerItemMouseLeaveSelect, which the parent uses to pause and resume the timer. These fire only when the item is currently selected.
Properties & Visual Configurations
description (required): the title text shown on the header in both open and closed states; it also supplies the accessible label of the content region.typography: picks the heading scale for the header text - defaults to h5; choose a larger title token only to match surrounding hierarchy.selected: marks this item as the open one. You normally set it on a single item to define the initial open panel; thereafter the parent owns it.duration: an optional per-item override (in ms) for how long this item stays open before the parent auto-advances, overriding the parent’s global duration for this item only.progress and uuid are managed by the parent at runtime; do not set them manually.