Skip to content
Svelte Material UI Components
HTML JavaScript CSS
Branch: master
Clone or download

README.md

Svelte Material UI

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

Demos

Check them out: https://sveltematerialui.com

Installation

You should install the packages individually. This package will install all of them, but why do that, when you can install them individually and better manage them?

# 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

Usage

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

To bundle this in your own code, use a Sass processor (not a Sass Svelte preprocessor, but a Sass processor). This package includes Sass files in its JS.

You must also have a _smui-theme.scss file in one of the Sass include paths. That is where you set the MDC theme variables. If it's empty, it will use the default theme values. See the theme file in the demo site for an example.

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">

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, {HelperText} from '@smui/textfield';
  import {Label, Icon} from '@smui/common';

  let superText = '';
</script>

Here are some juicy features:

  • You can add any arbitrary property to nearly all of the components and 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 textfield and select icons, because they are special snowflakes.)

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.

† 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.

Other Svelte UI Projects

Svelte UI libraries are really starting to make good progress. Check out this Fomantic-UI component library:

https://github.com/titans-inc/sveltemantic

License

Copyright 2019 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.

You can’t perform that action at this time.