Svelte Material UI

repository·master·Indexed 25 days ago

https://github.com/hperrin/svelte-material-ui

A collection of Svelte Material UI components including Accordion, Autocomplete, Badge, Banner, Bottom App Bar, Button, Card, Checkbox, Chip Input, and Chips. It provides tools to implement Material Design's shadow and depth system (z-space) through CSS classes, Sass mixins, and elevation overlay management.

Tokens: 71.5K
Snippets: 214
Records: 597
Agent score: 86%

What's inside svelte-material-ui

Use Svelte Material UI - Chip Input
master
The Chip Input component allows users to enter text that is converted into a set of chips. It also supports autocomplete functionality, enabling users to select choices from a list to be added as chips.
https://github.com/hperrin/svelte-material-ui/blob/master/packages/chip-input/README.md
Use Svelte Material UI - Autocomplete
master
The Autocomplete component provides users with suggestions while typing and functions as a combobox that accepts any user input. For interactive examples and usage patterns, visit the official demo page.
```
https://sveltematerialui.com/demo/autocomplete
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/autocomplete/README.md
Use Svelte Material UI - Select
master
The @smui/select component provides select menus that allow users to choose between multiple items, following the Material Design specification for Dropdown menus. For interactive examples and usage information, visit the official demo site.
```
https://sveltematerialui.com/demo/select
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/select/README.md
Use the Floating Label component
master
The @smui/floating-label package exports a default component used to create a floating label in an input field. This is typically used when manually constructing text fields rather than using a pre-built input component.
https://github.com/hperrin/svelte-material-ui/blob/master/packages/floating-label/README.md
Use Svelte Material UI - Image List
master
Image lists are RTL (Right-to-Left) aware containers designed to hold sets of images and optional content. For interactive examples and usage patterns, refer to the official Svelte Material UI demo site.
```
https://sveltematerialui.com/demo/image-list
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/image-list/README.md
Use Svelte Material UI Banners
master
Banners are used to display important, succinct messages that require user action to be dismissed. They are persistent, non-modal components that should be displayed at the top of the viewport (typically below a top app bar). Note that only one banner should be shown to the user at any time.
You can view interactive examples and usage information at the official demo site: https://sveltematerialui.com/demo/banner
https://github.com/hperrin/svelte-material-ui/blob/master/packages/banner/README.md
Use Svelte Material UI - Accordion
master
The Accordion component provides a group of panels that expand to show their content. For interactive examples and usage demonstrations, visit the official Svelte Material UI demo site.
```
https://sveltematerialui.com/demo/accordion
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/accordion/README.md
Use the Select Icon component
master
The Select Icon component provides an icon that appears next to a select menu, following the Material Design specification for dropdown menus.
https://github.com/hperrin/svelte-material-ui/blob/master/packages/select/icon/README.md
Use the Segmented Button component
master
Segmented buttons group related options together and allow the user to toggle them. For interactive demos and usage examples, visit the official Svelte Material UI demo page.
```
https://sveltematerialui.com/demo/segmented-button
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/segmented-button/README.md
Use the Icon Button component
master
The Icon Button component provides symbolic buttons or toggles. If the href property is provided, the component renders as an anchor element (A); otherwise, it renders as a Button.
https://github.com/hperrin/svelte-material-ui/blob/master/packages/icon-button/README.md
Install the @smui/slider package
master
To use the Svelte Material UI Slider component in your project, install the @smui/slider package via npm.
```
npm install --save-dev @smui/slider
```
https://github.com/hperrin/svelte-material-ui/blob/master/packages/slider/README.md
Migrate from SMUI 6 to SMUI 7
master
SMUI 7 migrated to MDC 14.0 and requires Svelte 4 (Svelte 3 is no longer supported).
Breaking Changes
- Tooling: Build tools (Rollup/Webpack) must be Svelte-aware via conditional exports.
- Component Tags: @smui/common/elements components are removed. Use the tag prop on components instead (e.g., <Button tag="div">).
- SVG Components: If using component={Svg}, change to tag="svg".
- Types: *ComponentDev types are removed. Use the component itself as the type. Components with component or tag props now use generic arguments for the tag type.
- TextField: The Input component from @smui/textfield sets value to Number.NaN when empty.
Component Changes
- Banner: Added autoClose prop and SMUIBanner:actionClicked event.
- Dialog: Added sheet and noContentPadding props.
- FAB/Switch: Added focusRing prop for High Contrast Mode support.
- List: Added disabledItemsFocusable and wrapper (on Item).
https://github.com/hperrin/svelte-material-ui/blob/master/MIGRATING.md

Svelte Material UI

What's inside svelte-material-ui

Breaking Changes

Component Changes