Neutron Polarization Manipulator

    @luxdamore/vue-css-doodle

    1.0.1 • Public • Published

    🎉 Vue Css Doodle

    Porting of css-doodle to VueJs, a web component for drawing patterns with CSS

    npm version npm downloads License

    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|right-auto to the doodle
    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

    Otechie

    ko-fi

    💘 Inspired by

    A web component for drawing patterns with CSS, css-doodle

    Check the full list of doodle on Codepen


    💡 Lighthouse

    Lighthouse audit score

    Install

    npm i @luxdamore/vue-css-doodle

    DownloadsWeekly Downloads

    18

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    260 kB

    Total Files

    9

    Last publish

    Collaborators

    • luxdamore