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 add modifiers from the @smui/common/events endpoint.

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.

A Link, with Default Prevented

Inner element props

Many SMUI components have inner elements that can take props with a prefix, like "input$" or "icon$".

Name