Keyboard<mds-keyboard>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à
testenumShows the keyboard key combination test result
trytrybooleanSets if the keyboard key combination test is enabled
Panoramica
The <mds-keyboard> web component renders a keyboard shortcut as a row of physical-looking keycaps, acting as the compound parent for one or more slotted <mds-keyboard-key> children. It has no direct HTML equivalent; it visualizes a key combination (e.g. Ctrl + C) and can optionally let the user verify that combination by typing it.
Semantic Behavior
Default slot is the key sequence: The component projects slotted <mds-keyboard-key> elements and automatically inserts a + separator between consecutive keys.Compound parent: It reads each child key’s name to build the expected combination; during a test the children are toggled to their pressed state.Test mode (try): When enabled the component appends a trigger button and a tooltip; clicking the button captures keystrokes and, at the first key release, compares the typed combination against the slotted keys, in slot order.Result feedback: A pass shows a “done” icon, a fail shows a “close” icon, and the tooltip surfaces the localized success or error message; the outcome is also reflected on the host via the test attribute.Localization: Trigger label, tooltip copy, and error messages resolve through the locale system (el/en/es/it).
Properties & Visual Configurations
This component does not use the shared variant / tone ladders from agents/variants.md.
Other behavioral props
try opts the keyboard into interactive verification mode. Enable it only when you want the user to be able to confirm a shortcut by typing it; leave it unset for a purely presentational shortcut display.test reflects the verification outcome ('pass' / 'fail') onto the host. It is primarily driven by the test flow and is mainly useful as a styling/state hook rather than a value you set yourself.