vue3-box-shadows

v1.1.89

Published

2 years ago

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

Downloads

150

0High
0Medium
0Low

andrejsharapov

frontend vue vue3 css box-shadow css-box-shadow

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.

| 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

Published

Vulnerabilities

Links

Maintainers

Keywords