Skip to content

Latest commit

 

History

History
159 lines (122 loc) · 6.88 KB

README.md

File metadata and controls

159 lines (122 loc) · 6.88 KB
Raw

Vue3 Box-shadows

A collection of simple and airy shadows for Vue.js v3 projects.

discord npm download GitHub issues

GitHub watchers GitHub forks GitHub stars

vue-box-shadows

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

Return to top