Package Exports
- @mandala-ui/split-button
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mandala-ui/split-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Mandala UI SplitButton Component
Mandala is a React component library that utilizes a declarative CSS library for styling.
Installation
Check the MonoRepo README for installation.
Description
SplitButton is effectively an on off switch. It takes a function on click and an isOn prop to toggle the state of it from another component.
Usage
if using the whole library:
import { SplitButton } from 'mandala';if only using this component:
import SplitButton from '@mandala-ui/split-button';Props
backgroundColor- the color of the surface area of the switchesdisabled- sets the button as disabled and reduces opacity 40%isOn- prop to switch which side of the switch is onoffColor- the color of the off section when the switch is offonClick- function for onClickonColor- the color of the on section when the switch is onpill- sets the radius of the ends to 100%radius- the border radius of the button (1-4, clamped), is disabled ifpillis set totrueshowLabels- shows the "on" and "off" text labels
| propName | propType | defaultValue | isRequired |
|---|---|---|---|
| backgroundColor | string | 'white' | - |
| disabled | string | 'black' | - |
| isOn | boolean | false | - |
| offColor | string | 'black' | - |
| onClick | function | null | - |
| onColor | string | 'black' | - |
| pill | boolean | false | - |
| radius | boolean | false | - |
| showLabels | boolean | false | - |
TODO:
- callback for analytics, etc
- colored border
- border width
