@fator/vue-material v0.0.4

vue-material

Requirements

• Vue.js 3.x

Installation

npm

$ npm i @fator/vue-material

yarn

$ yarn add @fator/vue-material

Usage

Import Styles

Import styles inside your main.js:

import { createApp } from 'vue'
import '@fator/vue-material/styles' // import styles
...

Use Components

Import and use components

<template>
  <h2>Vue Component</h2>
  <Button>Click me</Button> // <-- use component
</template>

<script>
import { Button } from '@fator/vue-material'; // <-- import component

export default {
  name: 'MyApp',
  components: {
    Button // <-- register component
  },
}
</script>

<style></style>

Adjust theme (optional)

Import and adjust theme colors. Colors need to be in rgb, like shown below.

import { createApp } from 'vue'
import theme from '@fator/vue-material/theme' // <-- import styles

  // default theme stylings
  // fontFamily: "Roboto, sans-serif",
  // primaryColor: "73, 69, 79",
  // primaryActionColor: "26, 91, 255",
  // primaryBackgroundColor: "255, 255, 255",
  // secondaryColor: "255, 255, 255",
  // secondaryBackgroundColor: "27, 30, 44",
  // elevation: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.16)",
  // elevationColored: `0 10px 20px -10px `,
  // ripple: "26, 91, 255"

theme.primaryActionColor = '123, 104, 238' // <-- example
...

Documentation (optional)

You can always check the documentation inside your project. Currently it is not complete.

import { createApp } from 'vue'
import MyApp from './src/components/MyApp.vue'
import Documentation from '@fator/vue-material/documentation' // <-- import documentation

const create = async () => {
  const app = createApp(MyApp);
  app.use(Documentation); // <-- use documentation
  app.mount('#app');
}
create();

<template>
  <h2>Vue Component</h2>
  <Documentation> // <-- display documentation
</template>

<script>
export default {
  name: 'MyApp',
}
</script>

<style></style>

Mixins (optional)

So far there is only one mixin available.

<template>
  <h2>Vue Component</h2>
  <Button @click="copyToClipboard('copy this text to clipboard')">Copy to clipboard</button>
</template>

<script>
import { Button } from '@fator/vue-material'
import { copyToClipboard } from '@fator/vue-material/mixins'

export default {
  name: 'MyApp',
  components: {
    Button
  },
  mixins: [
    copyToClipboard
  ],
}
</script>

<style></style>