Getting started

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);