UNPKG

woi-react-components

Version:

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

23 lines (19 loc) • 3.08 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# WOI Switch Button Component WOI switch button component is a reusable React component for creating interactive buttons in your web application. ## Props WOI Switch Button component accepts the following props: - `trackWidth` (number): The width of the track, specified as a numerical value (e.g., pixels) or as a percentage of its container's width. - `trackHeight` (number): The height of the track, specified as a numerical value (e.g., pixels) or as a percentage of its container's height. - `padding` (number): Padding is used to create space around an element's content, inside of any defined borders. - `trackBorderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. - `trackBorderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `trackBorderWidth` (number): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage. - `trackActiveColor` (string): The active color property is used to set the color of the track in active state. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `trackInActiveColor` (string): The active color property is used to set the color of the track in inactive state. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `thumbSize` (number): (number): The width and height of the thumb, specified as a numerical value (e.g., pixels) or as a percentage of its container's width and height. - `thumbBorderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. - `thumbBorderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `thumbBorderWidth` (number): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage. - `thumbActiveColor` (string): The active color property is used to set the color of the thumb in active state. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `thumbInActiveColor` (string): The inactive color property is used to set the color of the thumb in inactive state. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `isActive` (boolean): A boolean flag that determines whether the button is in a disabled state. When set to true, the button is not clickable or interactive.