A library of Svelte 3 Material UI components, based on the Material Design Web Components.

Demos

https://sveltematerialui.com

Installation

You should install the packages individually. Alternatively, you can install all of them at once with the svelte-material-ui package.

# Install the packages individually.
npm install --save-dev @smui/button
npm install --save-dev @smui/card
# ...

# Or, you can install this to get them all.
npm install --save-dev svelte-material-ui

Migration

If you are upgrading from an older version of SMUI to a newer one, it might be worth checking out the migration doc.

Usage

Check out the Webpack template and the Rollup template for examples.

1. To bundle this in your own code, use a Sass processor (not a Sass Svelte preprocessor, but a Sass processor). SMUI index.js files import Sass files, and they need to be compiled by a processor. The *.svelte files don't include any Sass or CSS, so a Svelte preprocessor is not necessary.
   • Alternatively, you can import from the bare.js files, which doesn't include any styling. Then you can either import the Sass yourself, or use the bare.css files which are precompiled and packaged with the default theme.
2. You must have a _smui-theme.scss file in one of your Sass include paths to compile the Sass. That is where you set the MDC theme variables. If it's empty, it will use the default theme values from MDC. See the theme file in the demo site for an example that uses Svelte colors.
3. If you want the Material Icon, Roboto, and Roboto Mono fonts, be sure to include these (or include them from a package):

   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">

4. You're now ready to use SMUI. Here's some example code:

   <Button on:click={() => alert('Clicked!')}>Just a Button</Button>
   <Button variant="raised"><Label>Raised Button, Using a Label</Label></Button>
   <Button some-arbitrary-prop="placed on the actual button">Button</Button>
   
   <Fab on:click={() => alert('Clicked!')} extended>
     <Icon class="material-icons" style="margin-right: 12px;">favorite</Icon>
     <Label>Extended FAB</Label>
   </Fab>
   
   <Textfield
     bind:value={superText}
     label="Super Text"
     input$aria-controls="super-helper"
     input$aria-describedby="super-helper"
   />
   <HelperText id="super-helper">What you put in this box will become super!</HelperText>
   
   <script>
     import Button from '@smui/button';
     import Fab from '@smui/fab';
     import Textfield from '@smui/textfield';
     import HelperText from '@smui/textfield/helper-text';
     import {Label, Icon} from '@smui/common';
   
     let superText = '';
   </script>

Here are some features you should know about:

• You can add arbitrary properties to all of the components and many of the elements within them.
• You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.
• You can add props to lower components and elements with things like input$maxlength="15".
• All standard UI events are forwarded on components, input events ("input" and "change") are forwarded on input components, and all MDC events are forwarded.
• Labels and icons are named exports in the components that use them, or you can use 'common/Label' and 'common/Icon'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)

Integration for Sapper

1. Install the following packages as dev dependencies

   • With yarn

     yarn add rollup-plugin-postcss node-sass --dev

   • With npm

     npm i -D rollup-plugin-postcss node-sass

2. Create the src/theme/_smui-theme.scss file

   mkdir src/theme && touch src/theme/_smui-theme.scss

3. Update rollup.config.js with the following configuration

   // ...
   // Put this along with the other imports.
   import postcss from "rollup-plugin-postcss";
   
   // ...
   
   // At the client svelte options change emitCss to false and css to true
   svelte({
     compilerOptions: {
       dev,
       hydratable: true,
       css: true
     },
     emitCss: false
   }),
   
   // Find this line, under "plugins:"
   commonjs(),
   
   // Then paste the following after it.
   // Once in the "client:" section, and again in the "server:" section.
   postcss({
     extensions: ['.scss', '.sass'],
     extract: false,
     minimize: true,
     use: [
       ['sass', {
         includePaths: [
           './src/theme',
           './node_modules'
         ]
       }]
     ]
   }),
   // NOT in the "serviceworker:" section.
   // ...
   

4. Install a SMUI package.

Components

I've only done components that need to/can be Svelte-ified. For some things, like RTL and layout grid, you can just use the MDC packages.

Click a component below to go to its documentation.

• Buttons
  • Floating Action Buttons
  • Icon Buttons
• Cards
• Chips
• Data Tables
• Dialogs
• Drawers
• Elevation†
• Image List
• Inputs and Controls
  • Checkboxes
  • Floating Label
  • Form Fields
  • Line Ripple
  • Notched Outline
  • Radio Buttons
  • Select Menus
    • Select Helper Text
    • Select Icon
  • Sliders
  • Switches
  • Text Field
    • Text Field Character Counter
    • Text Field Helper Text
    • Text Field Icon
• Linear Progress
• Lists
• Menu Surface
• Menus
• Paper‡
• Ripples
• Snackbars
  • Kitchen‡
• Tabs
  • Tab
  • Tab Bar
  • Tab Indicator
  • Tab Scroller
• Theme†
• Top App Bar
• Typography†

† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.

‡ This is not an MDC Web component. It is an addition that SMUI provides.

Support

You can support my work on this project through my other project, Tunnelgram. I have a Patreon set up for it. I started this project in order to Materialize Tunnelgram.

License

Copyright 2020-2021 Hunter Perrin

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.