Notably Polite Mariner

    vue-squircle

    0.2.1 • Public • Published

    vue-squircle

    Smooth rounded corners (like iOS) for Vue.

    Screenshot

    Screenshot

    This project was inspired by this Medium post which unfortunately—like most attempts—doesn't account for rectangles other than squares.

    Installation and Use

    Install the npm package

    $ npm install vue-squircle
    

    Import it into your Vue.js project

    import VSquircle from "vue-squircle";
    import Vue from "vue";
    
    Vue.use(VSquircle);
    

    And use it like this

    <v-squircle
     radius="40px"
     smoothing="10"
     padding="20rem"
     background="red" >
        Your content goes here!
    </v-squircle>
    

    Props

    When you use <v-squircle> elements, you can use different props to change the look of your smooth rounded background.

    • radius and padding are Strings and their default value is "25px".
    • smoothing is a Number and the default value is 4.
    • background is a String and the default value is hsla(0,0%,0%,0.5), but it could also be an image.

    TODOs

    I will add background-blur filter options soon.

    Install

    npm i vue-squircle

    DownloadsWeekly Downloads

    12

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • janospower