Package Exports
- vue-acrylic
- vue-acrylic/dist/index.cjs
- vue-acrylic/dist/index.mjs
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-acrylic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Vue Acrylic
๐ Demo
๐ Requirements
- Chorme 76+
- Vue 3+
โ๏ธ Installation
npm i -S vue-acrylic๐ฆ Use in JS
<h1 id="acrylic1">ACRYLIC</h1>
<h1 id="acrylic2">ACRYLIC</h1>
<script>
import { useAcrylic } from 'vue-acrylic'
const options1 = {
bulr: 20,
noiseOpacity: 1,
noiseSize: 50
}
useAcrylic(document.getElementById('acrylic1'))
useAcrylic(document.getElementById('acrylic2'), options1)
</script>๐ฆ Use in Vue
import { createApp } from 'vue'
import Acrylic from 'vue-acrylic'
import App from './App.vue'
createApp(App).use(Acrylic).mount('#app')<script setup>
const opt = {
bulr: 20,
noiseOpacity: 1,
noiseSize: 50
}
</script>
<template>
<div v-acrylic>Acrylic</div>
<div v-acrylic="opt">Acrylic</div>
</template>๐ Props
| name | type | default | Description |
|---|---|---|---|
| blur | MaybeRef |
30 | ๆจก็ณๅคงๅฐ |
| color | MaybeRef |
#e6e6e6 | ้ข่ฒ/่ฒ่ฐ่ฆ็ๅฑ |
| opacity | MaybeRef |
0.5 | ่ฒ่ฐๅฑไธ้ๆๅบฆ |
| brightness | MaybeRef |
1 | ๆงๅถๅฏไป่ๆฏ็ฉฟ่ฟ Acrylic ๅพ้ข็ไบฎๅบฆ |
| saturate | MaybeRef |
1.6 | ๆงๅถๅฏไป่ๆฏ็ฉฟ่ฟ Acrylic ๅพ้ข็้ฅฑๅๅบฆ |
| noiseOpacity | MaybeRef |
0.75 | ๅช็นไธ้ๆๅบฆ |
| noiseSize | MaybeRef |
30 | ๅช็นๅคงๅฐ |
| disabled | MaybeRef |
false | ๆฏๅฆ็ฆ็จ Acrylic |
| fallbackColor | MaybeRef |
#e6e6e6e6 | ๅจ็ฆ็จ็ถๆไธญๆฟๆข Acrylic ็็บฏ่ฒ |
๐ Inspired by Fluent Design's Acrylic Material
โญ๏ธ Show Your Support
Please give a โญ๏ธ if this project helped you!
๐ Contributing
If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.