vue-box-shadows

v2.0.3

Published

2 years ago

Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.

Downloads

0High
0Medium
0Low

andrejsharapov

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.

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-shadows

How 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme