Quick Guide
Some helpful guides for common use patterns in SMUI that are different than standard Svelte.
Targeting Classes
Because Svelte limits your CSS to only the current component, you need to use a ":global" selector to target SMUI elements.
Events and Modifiers
SMUI supports listening to all events. You can also use modifiers with the "$" syntax.
No events yet.
Try clicking and using the Enter key to activate this next button. (The click
event's target is an element below the button while the key event's target is
the button.)
No events yet.
Standard events can be modified, like blocking navigation on the click event
of a link.
TypeScript event types can be tricky with SMUI components. This example shows
you how to get them right.
Mouse Button: None yet.
Inner element props
Many SMUI components have inner elements that can take props with a prefix, like "input$" or "icon$".