Svelte Material UI - Chips
Chips are used to show discrete information, filter options, input tags, or actions.
Installation
npm install --save-dev @smui/chips
Examples and Usage Information
https://sveltematerialui.com/demo/chips
Exports
(default)
A chip.
Props / Defaults
use
: []
- An array of Svelte actions and/or arrays of an action and its options.
class
: ''
- A CSS class string.
ripple
: true
- Whether to implement a ripple for when the component is interacted with.
touch
: false
- Increase the touch target.
shouldRemoveOnTrailingIconClick
: true
- Whether the chip should be removed upon clicking the trailing icon.
shouldFocusPrimaryActionOnClick
: true
- Whether the chip should focus the primary action when it is clicked.
Events
MDCChip:interaction
MDCChip:selection
MDCChip:removal
MDCChip:trailingIconInteraction
MDCChip:navigation
Set
A set of chips. Chips should only be added onto the end of the set's chip array.
Props / Defaults
use
: []
- An array of Svelte actions and/or arrays of an action and its options.
class
: ''
- A CSS class string.
chips
[]
- An array containing the chips.
key
chip => chip
- A function used to get the key of the chip. Chip sets that have removable chips should always provide unique keys.
selected
undefined
- The currently selected chip or chips.
choice
false
- Whether to present the chips as a set of choices, allowing one to be chosen.
filter
false
- Whether to present the chips as a set of options, allowing any number to be chosen.
input
false
- Whether to present the chips as a set of values, allowing them to be removed.
Text
A text label.
todo...
LeadingIcon
A graphic icon.
todo...
TrailingIcon
A graphic icon.
todo...
TrailingAction
A graphic icon.
todo...
More Information
See Chips in the Material design spec.
See Chips in MDC-Web for information about the upstream library's architecture.
8.0.0-beta.2 (2024-12-13)
Bug Fixes
- don't use state rune on accessor lists and maps (0c90d40)
- use svelte event on instead of addEventListener (11b68e7)