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. Some shadows are borrowed from the collection of box-shadow.css.
Install
$ npm i vue-box-shadows
# or yarn
$ yarn add vue-box-shadows
How to use
To create a basic shadow element with minimal configuration, write the following:
Vue CLI
<div v-box-shadow>
Add beautiful shadow effects to your project without thinking about CSS.
Properties are supported by all modern browsers.
</div>
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
Vue.use(vueBoxShadows, {
// options
});
Nuxt.js: Global Registration
Create plugin /plugins/vue-box-shadows.js
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
Vue.use(vueBoxShadows);
Add to nuxt.config.js
export default {
plugins: [{ src: "~/plugins/vue-box-shadows" }],
};
Usage in index.vue
<template>
<div
v-for="(item, index) in items"
:key="index"
v-box-shadow="item"
>
{{ item }}
</div>
</template>
<script>
export default {
data: () => ({
items: [2, 4, 2],
}),
};
</script>
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. |
Groups
In release v1.0.4, shadows have been grouped and sorted.
You can see the entire list of shadows in the table below.
| Group | Name ($ is value/number) | Values | Shadow id's | Examples |
|---|---|---|---|---|
| None | none |
1 | 0 | --- |
| Elevation | el-$ |
1-24 | 1-24 | View |
| Borders | bd-$ |
1-6 | 25-30 | View |
| Neumorphism | neu-$ or neu-$-i or neu-$-io |
1-3 | 31-39 | View |
| Axis x | ax-$ |
1-6 | 40-45 | View |
| Axis y | ay-$ |
1-6 | 46-51 | View |
| Small inner side | si-$ |
1-4 | 52-55 | View |
| Medium inner side | mi-$ |
1-4 | 56-59 | View |
| Large inner side | li-$ |
1-4 | 60-63 | View |
| Top | t-$ |
1-6 | 64-69 | View |
| Bottom | b-$ |
1-6 | 70-75 | View |
| Right side | r-$ |
1-6 | 76-81 | View |
| Left side | l-$ |
1-6 | 82-87 | View |
| Angle: top left | tl-$ |
1-6 | 88-93 | View |
| Angle: top right | tr-$ |
1-6 | 94-99 | View |
| Angle: bottom right | br-$ |
1-6 | 100-105 | View |
| Angle: bottom left | bl-$ |
1-6 | 106-111 | View |
| Patterns | p-$ |
1-2 | 112-115 | View |
Warning
Names don't work
In the v2.0.0 release, you will be able to use these names in the directive instead of numbers.
They are currently unavailable.
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 · Options · Groups
![[Bug]: Cannot publish over previously published version](https://avatars.githubusercontent.com/u/44722574?v=4)
36 Aug 28, 2022
1 Dec 27, 2022
26 Dec 27, 2022
112 Jan 2, 2023
8.7k Jan 4, 2023
15.8k Jan 9, 2023
9.1k Jan 4, 2023
2 Sep 25, 2022
255 Dec 22, 2022
4.6k Jan 3, 2023
2.1k Jan 2, 2023
36 Sep 20, 2022
2.6k Dec 31, 2022
75.9k Jan 9, 2023
6 Jun 20, 2021
64 Dec 12, 2022
20 Dec 29, 2022
5 Oct 24, 2022
765 Dec 30, 2022