Usage

Once you have installed Svelte Materialify and other dependencies, it is time to learn how to use it.

Layout

All components should be children of MaterialApp which has all the global styles and enables theming.

<script>
  import { MaterialApp } from 'svelte-materialify';
  let theme = 'light';
</script>

<MaterialApp theme="{theme}">
  <slot />
</MaterialApp>

Theming

What to customise some SCSS variables, worry not, just put them in the _material-theme.scss you had created.

$body-font-family: "Poppins", "Segoe UI", sans-serif;

$spacer: 6px !default;
...

To access these variables in your own components just import the variable file from svelte materialify.

@import 'svelte-materialify/src/styles/variables';

Components

Just import them one by one or all at once from svelte materialify.

<script>
  import * as S from 'svelte-materialify';

  import { Button } from 'svelte-materialify';
  // OR import from source
  import { Button } from 'svelte-materialify/src';
  // OR directly import the button component
  import Button from 'svelte-materialify/src/components/Button/index.js';
</script>

<S.Button>These Are</S.Button>

<button>The Same Thing</button>

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Edit This Page on GitHub Last Updated: 2021-02-15