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-shadowsUsage
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.
| Group | Id | Names | Values | Examples |
|---|---|---|---|---|
| None | 0 | none |
1 | --- |
| Elevation | 1-24 | el-$ |
1-24 | View |
| Borders | 25-30 | bd-$ |
1-6 | View |
| Neumorphism | 31-39 |
neu-$ or neu-$-i or neu-$-io
|
1-3 | View |
| Axis x | 40-45 | ax-$ |
1-6 | View |
| Axis y | 46-51 | ay-$ |
1-6 | View |
| Small inner side | 52-55 | si-$ |
1-4 | View |
| Medium inner side | 56-59 | mi-$ |
1-4 | View |
| Large inner side | 60-63 | li-$ |
1-4 | View |
| Top | 64-69 | t-$ |
1-6 | View |
| Bottom | 70-75 | b-$ |
1-6 | View |
| Right side | 76-81 | r-$ |
1-6 | View |
| Left side | 82-87 | l-$ |
1-6 | View |
| Angle: top left | 88-93 | tl-$ |
1-6 | View |
| Angle: top right | 94-99 | tr-$ |
1-6 | View |
| Angle: bottom right | 100-105 | br-$ |
1-6 | View |
| Angle: bottom left | 106-111 | bl-$ |
1-6 | View |
| Patterns | 112-115 | p-$ |
1-2 | --- |
Options
| Option | Type | Default | Description |
|---|---|---|---|
| useClass | Boolean | false | Set to true in order to import styles into <head> automatically. |
| shadowBaseCustom | String | "0 2px 8px 0 rgb(50 50 50 / 8%)" | Set a value for box-shadow to change the default property. |
// ...
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