vue-squircle
Smooth rounded corners (like iOS) for Vue.
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
andpadding
are Strings and their default value is"25px"
.smoothing
is a Number and the default value is4
.background
is a String and the default value ishsla(0,0%,0%,0.5)
, but it could also be an image.
TODOs
I will add background-blur filter options soon.