solid-corner-smoothing
TypeScript icon, indicating that this package has built-in type declarations

0.2.6 • Public • Published

Solid corner smoothing

This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.

From version 0.2.0 will support solid-start and the documentation has been changed

demo image demo image

demo image demo image

Installation

npm install solid-corner-smoothing
pnpm install solid-corner-smoothing
yarn add solid-corner-smoothing

Usage

Import

import SolidCornerSmoothing from 'solid-corner-smoothing';

Basic

const App = () => {
  return (
    <div>
      <SolidCornerSmoothing
        class="box"
        options={{
          cornerRadius: 40,
          cornerSmoothing: 0.8,
          reSize: true,
          preserveSmoothing: true,
        }}
      >
        This is box
      </SolidCornerSmoothing>
    </div>
  );
};

export default App;

demo image

Using with reactivity

you can use react and have to enable reSize prop to be able to change element state according to it

const [radius, setRadius] = createSignal(60);
const [smoothing, setSmoothing] = createSignal(0.7);

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      options={{
        cornerRadius: radius(),
        cornerSmoothing: smoothing(),
        preserveSmoothing: true
        reSize: true
      }}
    >
      This is box
    </SolidCornerSmoothing>
  </div>
);

Wrapper

pass the tag name as a string to the wrapper prop that will be used as the root tag

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      wrapper="form"
      options={{ cornerRadius: 60, cornerSmoothing: 0.8 }}
    >
      This is box
    </SolidCornerSmoothing>
  </div>
);

Solid-styled-components

You can also pass a style-components to the wrapper prop to generate the root tag

const Btn = styled('button')`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  border: none;
`;

return (
  <div>
    <SolidCornerSmoothing
      wrapper={Btn}
      options={{
        cornerRadius: 30,
        cornerSmoothing: 0.8,
        backgroundColor: '#ddd',
        border {
          color: "tomato",
          size: 2
        }
      }}
    >
      This is button
    </SolidCornerSmoothing>
  </div>
);

demo image

Use css

Background color can be used via css or options props, border color can only be passed through options props. (the colors passed options props also accept css variables)

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      wrapper="button"
      options={{
        cornerRadius: 30,
        cornerSmoothing: 0.8,
        preserveSmoothing: true
        border: {
          color: "tomato",
          size: 2
        }
      }}
    >
      This is button
    </SolidCornerSmoothing>
  </div>
);
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background-color: gray;
}

Props

Prop name Type value Description
wrapper string, Styled Element Root tag (default is div), can also be a solid-styled-components
options Options Where to put options. (required to work)border-radius.

Options

Prop name Type value Description
cornerRadius number Similar to the CSS property border-radius.
topLeftCornerRadius number Radius each corner
topRightCornerRadius number Radius each corner
bottomRightCornerRadius number Radius each corner
bottomLeftCornerRadius number Radius each corner
cornerSmoothing number The degree of corner smoothing as a number in the range 0–1. 0 is equivalent to no smoothing and looks like normal border-radius. 1 indicates maximal smoothing.
preserveSmoothing boolean Allow corner smoothing to work better on large rounded corners.
reSize boolean Allows resizing and corners
border.size number When this prop has a value, it will turn into border mode (need to change the css according to the instructions or use prop borderColor and backgroundColor)
border.color string Border color
backgroundColor string Background color (can still use css if not using this prop)
fitBorderWidth number Add custom angle width parameter to fix visual effects

Package Sidebar

Install

npm i solid-corner-smoothing

Weekly Downloads

3

Version

0.2.6

License

MIT

Unpacked Size

37.3 kB

Total Files

6

Last publish

Collaborators

  • nguyenvanlong