Usage
Once you have installed Svelte Materialify, it’s time to learn how to use it. Depending on the Install you chose, there are two ways to import: In your svelte files, import the compiled module In your svelte files, import the uncompiled module All components should be children of If you don’t want any global styles (other than theming and colors), you can use You want to customise some SCSS variables? Worry not, just put them in the _material-theme.scss you had created: To access these variables in your own components, just import the variable file from svelte materialify: If you want to use SCSS and SASS styles in your own components, use svelte-preprocess.Importing the Components
With Default Styles
from 'svelte-materialify':<script>
import { MaterialApp, Button } from 'svelte-materialify';
</script>
<MaterialApp>
<Button>Compiled (Default styles, used in the REPL)</Button>
</MaterialApp>With Custom Styles
from 'svelte-materialify/src':<script>
import { MaterialApp, Button } from 'svelte-materialify/src';
//this works, too:
import Button from 'svelte-materialify/src/components/Button/Button.svelte';
</script>
<MaterialApp>
<Button>Uncompiled (Custom styles, defined in _material-theme.scss)</Button>
</MaterialApp>Layout
MaterialApp, which provides all the global styles and enables theming:<script>
import { MaterialApp } from 'svelte-materialify'; //or from `/src`
let theme = 'light';
</script>
<MaterialApp theme="{theme}">
<slot />
</MaterialApp>MaterialAppMin instead:<script>
import { MaterialAppMin } from 'svelte-materialify'; //or from `/src`
let theme = 'light';
</script>
<MaterialAppMin theme="{theme}">
<slot />
</MaterialAppMin>Theming
$primary-color: #004d26;
$secondary-color: #ff99cc;
$error-color: #420420;
$success-color: #66ff99;
$body-font-family: "Poppins", "Segoe UI", sans-serif;
$spacer: 6px !default;
...@import 'svelte-materialify/src/styles/variables';
Ready For More?
Continue to learn more about svelte materialify with content selected by the creator.