Vue Box-shadows
Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows. Add beautiful shadow effects to your Vue project without thinking about CSS.
Fully compatible with
and others...
Note
You are reading the documentation for vue-box-shadows on vue 2.
Documentation for vue-box-shadows for vue 3 is here.
Install
$ npm i vue-box-shadows
# or yarn
$ yarn add vue-box-shadowsHow to use
To create a basic shadow element with minimal configuration, write the following:
<script>
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
Vue.use(vueBoxShadows, {
// options
});
export default {};
</script>
<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 ids or short names from the groups table.
Note
Note that ids and names are used differently:
<script>
export default {
data: () => ({
items: [2, 4, 2],
}),
};
</script>
<template>
<!-- use name -->
<div v-box-shadow:neu-2></div>
<!-- or -->
<!-- use id -->
<div v-box-shadow="34"></div>
<!-- use shadow ids in a loop -->
<div v-for="(item, index) in items" :key="index" v-box-shadow="item">
{{ item }}
</div>
</template>Groups
The entire list of shadows can be viewed here or separately in the table below.
| Group | Id | Names ($ is value/number) | 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. |
Browser compatibility
Properties are supported by all modern browsers. You can find out about browser support for earlier versions on the Can I Use site.
Contributing
Feedback, bug reports, and pull requests are welcome. Read the detailed information about contributions in the CONTRIBUTING.md file.
Note
Bug reporting
If you find a bug and would like to report it, please make sure the request is not on the list of known issues.
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