Common
A common Label and Icon, helper utilities, and elemental components.
Installation
npm i -D @smui/common
Demos
Common Label and Icon
The common label and icon are also exported from each package that uses them.
SmuiElement Component
Many SMUI components let you customize which DOM element is used to render them. This is done with the SmuiElement component.
em element!Svg Elements
In the SMUI components that let you customize which DOM element is used to render them, you can use the "svg" tag to render an SVG.
Clicked: 0
Helper Utilities
Class Map
Build a class string from a map of class names to conditions. This is
useful when you need to add classes to a component, since Svelte's
"class:" directives don't work on components. (It's also useful for
actions that take addClass and removeClass functions.)
Dispatch
Dispatch a custom event. This differs from Svelte's component event
system, because these events require a DOM element as a target, can bubble
(and do by default), and are cancelable with event.preventDefault(). All SMUI events are dispatched with this.
Caught Event Detail:
Exclude and Prefix Filter
Exclude differs from normal omit functions by also excluding all
properties that begin with a given string if that string ends with "$". Prefix
Filter filters an object for only properties with a certain prefix. They are
usually used together to allow props to be given to multiple elements within
a component.
Use Actions
An action that takes actions and runs them on the element. Used to allow actions on components, and forward actions from one component to another, until the ultimate component finally renders the DOM element.
Tap me.
Press me.
Announce
A function that announces a string of text to users who are using a screen reader.
Other Components
Class Adder Builder
Use this to build a ClassAdder component. ClassAdder components are useful for reducing the size of your bundle. If you have tons of simple components that just need to add classes/props or set a context, using ClassAdder components means there's only one actual Svelte component in your bundle for all of these many tiny components.