Installation
npm install @thewebformula/materially
Imports
// Everything
import '@thewebformula/materially';
// Individual components
import '@thewebformula/materially/components/navigation-drawer';
import '@thewebformula/materially/components/button';
...
// Utilities
import {
mcDate,
mcDevice,
mcDialog,
mcUtil,
mcSnackbar,
MCSwipe
} from '@thewebformula/materially/services';
// Individual Utilities
import mcDialog from '@thewebformula/materially/services/dialog';
...
Colors
You can generate theme colors using the theme-generator. It's recommended to add this to your build process
More information on Styles page
import generateTheme from '@thewebformula/materially/theme-generator';
generateTheme({
coreColors: {
// primary is the only required color
primary: '#6750A4',
// By default these generate from the primary
// You can override them here
secondary: '#625B71',
tertiary: '#7D5260',
neutral: '#67616f',
neutralVariant: '#605666',
error: '#B3261E'
},
// Specify custom colors
customColors: [
{
name: 'name',
color: '#5b7166'
}
]
}, './color-tokens.css');
/* Import the generated color tokens to your app */
@import url(./color-tokens.css);
App css
You can prevent page load layout shifting by adding visibility: hidden to the app
<!DOCTYPE html>
<html lang="en">
<head>
...
<!--
Add visibility: hidden to body.
This will automatically be removed when app is ready
-->
<style>
body {
visibility: hidden;
}
</style>
<script defer type="module" src="/app.js"></script>
...
</head>
<body>
<mc-navigation-drawer>...</mc-navigation-drawer>
<mc-pane-container>
<mc-pane id="page-content"></mc-pane>
</mc-pane-container>
</body>
</html>