🎉 Vue Css Doodle
Porting of css-doodle to VueJs, a web component for drawing patterns with CSS
Installation
This package is available on npm.
# Deps
npm install --save @luxdamore/vue-css-doodle
Usage
As a component
// Component
import { VueCssDoodle } from '@luxdamore/vue-css-doodle';
import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css';
// Install
Vue.component(
VueCssDoodle.name,
VueCssDoodle
);
// Or in a .vue file
export default {
components: {
'vue-css-doodle': VueCssDoodle,
},
};
// Add this line to your main.js
Vue.config.ignoredElements = [ 'css-doodle' ];As a plugin
// Plugin
import VueCssDoodle from '@luxdamore/vue-css-doodle';
import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css';
// Install
Vue.use(
VueCssDoodle
);Browser's way
<!doctype html>
<html>
<head>
<!-- VueCssDoodle style -->
<!-- Old way -->
<link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css" />
<!-- end old way -->
<!-- New way -->
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css" as="style" onload="this.rel='stylesheet'" />
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js" as="script" />
<!-- end new way -->
<!-- end VueCssDoodle style -->
</head>
<body>
<!--
Others script (ex. VueJs) and html.
-->
<!-- VueCssDoodle script -->
<script src="https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js"></script>
<!-- end VueCssDoodle script -->
</body>
</html>Markup
<vue-css-doodle>
:doodle {
@grid: 50x1 / 80%;
}
@place-cell: center;
@size: calc(100% / @size * @i);
transform: rotate(calc(@i * 5deg));
border-radius: 30%;
border: 1px solid hsla(
calc(10 + 4 * @i), 70%, 68%, @r.8
);
</vue-css-doodle>Integrations
NuxtJS
- Create a file in the
pluginsfolder; - Name it
vue-css-doodle.client.js; - Install it as a plugin;
- Import it in the
nuxt.config.jsfile as client side only.
Options
Slots
# Available
slot="default" # Add the content, it expose v-slot="{ generate }" method to refresh the doodle
Props
| Attribute | Type | Default | Required | About |
|---|---|---|---|---|
| title | String | null | false | The title |
| grid | String or Number | null | false | Value of grid-attr
|
| use | String | null | false | Value of use-attr
|
| height | String | null | false | Height of the doodle |
| width | String | null | false | Width of the doodle |
| mx-auto | Boolean | false | false | Add `margin-left |
| fit-width | Boolean | false | false | Force the doodle to fit in a max-width
|
| fit-height | Boolean | false | false | Force the doodle to fit in a max-height
|
| fill-height | Boolean | false | false | Expand the doodle to an height of 100%
|
| click-to-update | Boolean | false | false | Refresh on click |
| overflow-hidden | Boolean | false | false | Add overflow-hidden to the container |
| absolute | Boolean | false | false | Set position to absolute
|
Check the DOCS for more information.
🐞 Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
👥 Contribution
Please make sure to read the Contributing Guide before making a pull request.
📖 Changelog
Details changes for each release are documented in the release notes.
📃 License
MIT License // Copyright (©) 2019-present Luca Iaconelli
💸 Are you feeling generous today? :)
Do you want to share a beer? We can be good friends.. Paypal // Patreon
It's always a good day to be magnanimous - cit
💼 Hire me
💘 Inspired by
A web component for drawing patterns with CSS, css-doodle
Check the full list of doodle on Codepen
💡 Lighthouse
