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.1 (2024-12-11)
Bug Fixes
- finish some migration steps, update readme (95fbdc2)
- migrate away from svelte:component (8cc6c77)
- migrate to new module script declaration in svelte files (c1a918a)
- remove bindable rune from things that don't need it (2b77cf8)
- shorten runes options and snippet renders (d1368a6)
- svg demo (db24e33)
- type issues (0424a48)
- use snippets instead of slots for migrated components (99ca184)
Features
- migrate components in accordion to runes (ae985f3)
- migrate components in autocomplete to runes (8201ec2)
- migrate components in badge to runes (20db79a)
- migrate components in banner to runes (5de28c8)
- migrate components in bottom app bar to runes (1f92d28)
- migrate components in button to runes (63c91d4)
- migrate components in card to runes (dbabb13)
- migrate components in checkbox to runes (60bf4ef)
- migrate components in chip input to runes (e53dda1)
- migrate components in chips to runes (1d9f88d)
- migrate components in circular progress to runes (a5ff2a0)
- migrate components in common to runes (0b14a99)
- migrate components in data table to runes (c4f2909)
- migrate components in dialog to runes (9c936ab)
- migrate components in drawer to runes (cd03aa5)
- migrate components in fab to runes (43a2a1c)
- migrate components in floating label, line ripple, and notched outline to runes (605ca35)
- migrate components in form field to runes (b905153)
- migrate components in icon button to runes (58edcd2)
- migrate components in image list to runes (9b7063b)
- migrate components in layout grid to runes (2a806f5)
- migrate components in linear progress to runes (a82d923)
- migrate components in list to runes (6ece353)
- migrate components in menu surface to runes (bde6442)
- migrate components in menu to runes (42a84e8)
- migrate components in radio to runes (9e18b62)
- migrate components in segmented button to runes (1dece23)
- migrate components in select to runes (451d7c0)
- migrate components in slider to runes (f1783d9)
- migrate components in snackbar to runes (30ad599)
- migrate components in switch to runes (0394217)
- migrate components in tab and tab bar to runes (3f3ceef)
- migrate components in text field to runes (7233ecc)
- migrate components in tooltip to runes (69055f6)
- migrate components in top app bar to runes (b6dff77)
- migrate components in touch target to runes (e2a005c)
- turn on runes mode on demo site and begin migrating (52f1681)