🎉 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 plugins folder;
Name it vue-css-doodle.client.js;
Install it as a plugin;
Import it in the nuxt.config.js file 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

💸 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

luxdamore / vue-css-doodle Goto Github PK

vue-css-doodle's Introduction

🎉 Vue Css Doodle

Installation

Usage

As a component

As a plugin

Browser's way

Markup

Integrations

NuxtJS

Options

Slots

Props

🐞 Issues

👥 Contribution

📖 Changelog

📃 License

💸 Are you feeling generous today? :)

💼 Hire me

💘 Inspired by

💡 Lighthouse

vue-css-doodle's People

Contributors

Stargazers

Watchers

Forkers

vue-css-doodle's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs