CheckBox
Default CheckBox
const CheckboxExample = () =>
<Checkbox id='checkbox' label= 'Checkbox' />;
Animated Checkbox
slide
const CheckboxExample = () =>
<Checkbox
animationProps={{
hover: {
key: 'slide',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Checkbox>
duration 1 s
duration 2 s
duration 3 s
duration 4 s
duration 5 s
squeeze
const CheckboxExample = () =>
<Checkbox
animationProps={{
hover: {
key: 'squeeze',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Checkbox>
duration 1 s
duration 2 s
duration 3 s
duration 4 s
duration 5 s
bgColorFade
const CheckboxExample = () =>
<Checkbox
animationProps={{
hover: {
key: 'bgColorFade',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Checkbox>
duration 1 s
duration 2 s
duration 3 s
duration 4 s
duration 5 s
shake
const CheckboxExample = () =>
<Checkbox
animationProps={{
hover: {
key: 'shake',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Checkbox>
duration 1 s
duration 2 s
duration 3 s
duration 4 s
duration 5 s