vue3-box-shadows v1.1.89

Vue3 Box-shadows

A collection of simple and airy shadows for Vue.js v3 projects.

Note
You are reading the documentation for vue-box-shadows on Vue.js v3.
Documentation for vue-box-shadows for Vue.js v2 is here.

Download and Installation

$ npm i --save-dev vue3-box-shadows
# or yarn
$ yarn add --dev vue3-box-shadows

Usage

import { createApp } from "vue"
import App from "./App.vue"
import shadows from "vue3-box-shadows";

const app = createApp(App);

app.use(shadows);
app.mount('#app');

To create a basic shadow element with minimal configuration, write the following:

<template>
  <div v-box-shadow>
    Add beautiful shadow effects to your project without thinking about CSS.
    Properties are supported by all modern browsers.
  </div>
</template>

To use collection shadows, you need to apply id or short name-$ ($ is value) from the groups table.

<template>
  <!-- use name -->
  <div v-box-shadow:neu-2></div>

  <!-- or -->

  <!--  use id -->
  <div v-box-shadow="34"></div>
</template>

Groups

Examples of shadows can be seen in the table below. To work with shadows on your site, simply select a group that matches your site's style (elevation to example), select an ids or names, and you're done.

Options

// ...
app.use(shadows, {
  useClass: false,
  shadowBaseCustom: "0 2px 8px 0 rgb(50 50 50 / 8%)",
});

License

Vue-box-shadows is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

Installing · Usage · Groups · Options