Filter item<mds-filter-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à
disableddisabledbooleanSets if the component is disabled or not
selectedselectedbooleanSets the component to selected state
countstringShows the number of items will be filtered by the component, also read out after the label as a number of results
iconstringSets the icon of the filter item
labelstringSets the label of the filter item
valuestringSets the value of the component to be used with forms
Panoramica
The <mds-filter-item> web component is a single selectable option inside the <mds-filter> container of the Magma Design System. It renders as a toggle button (icon, label, and an optional count badge) and acts as the toggleable unit that drives the parent’s filter selection - it has no standalone HTML primitive equivalent.
Semantic Behavior
Compound child only: <mds-filter-item> must be a direct slot child of <mds-filter>; it is not used standalone and should not be mixed with other child types.Self-toggling + event: Clicking (or activating via the keyboard) flips selected and emits mdsFilterItemSelect with { id, selected }. The id is the one the parent assigns on load (item-0, item-1, …), replacing any id set in the markup. The parent enforces single vs. multiple selection and re-emits mdsFilterChange with the aggregated value list.State owned with the parent: selected doubles as a styling hook and as the flag the parent reads/writes - in single-select mode the parent clears the other items’ selection, and on reset it clears the whole group. The parent also follows a selected set by the application, without emitting mdsFilterChange.Toggle button: The host is a button whose aria-pressed follows selected. Its name is the label followed by the count as a number of results in the page language (the lang of <html>): “Nuove, 11 results” in English, “Nuove, 11 risultati” in Italian. An aria-label written on the host by the author stays.Keyboard activation: Enter (and numpad Enter) and Space activate the item like a pointer click.Focus management: The item is focusable unless disabled, in which case it drops out of the tab order.
Properties & Visual Configurations
selected: The selection state of the item. Set it on initial markup to pre-select a filter, or at runtime from the application (a filter restored from the address, a clear button outside the bar): the parent follows, in single mode clearing the others.value: The form/data value contributed to the parent’s aggregated mdsFilterChange payload when the item is selected. Provide a meaningful value distinct from the human-readable label.count: An optional badge showing how many results the filter would yield. Use it only when the count is meaningful to the user; omit it for purely categorical filters.icon: Optional leading icon (an icon name string). Without a label the item is named after the last segment of the slug (map for mi/baseline/map); give it an aria-label of your own when the slug does not say what the filter does.disabled: Blocks the item: it leaves the tab order, ignores clicks and keys, is announced as unavailable (aria-disabled) and is painted in the disabled text colour.