Porting of css-doodle to VueJs, a web component for drawing patterns with CSS
This package is available on npm.
# Deps
npm install --save @luxdamore/vue-css-doodle
// 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' ]; // Plugin
import VueCssDoodle from '@luxdamore/vue-css-doodle';
import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css';
// Install
Vue.use(
VueCssDoodle
); <!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> <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>- 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.
# Available
slot="default" # Add the content, it expose v-slot="{ generate }" method to refresh the doodle
| 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.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.
Details changes for each release are documented in the release notes.
MIT License // Copyright (©) 2019-present Luca Iaconelli
Do you want to share a beer? We can be good friends.. Paypal // Patreon
It's always a good day to be magnanimous - cit
A web component for drawing patterns with CSS, css-doodle
Check the full list of doodle on Codepen
