0.0.2 • Published 8 months ago
@licuido-ui/ui_compare-the-feature v0.0.2
CompareTheFeature
what the difference between a Component and a Feature is.Easily identify
- @author Henry Dyson J henry@crayond.co
Link
Story Book Link CompareTheFeature
PlayGround
Installation
npm i @licuido-ui/ui_compare-the-featureImport component
import { CompareTheFeature } from '@licuido-ui/ui_compare-the-feature';Usage
<CompareTheFeature rowData={[]} columnData={[]} />Image

Sample Code
<CompareTheFeature
compareHeadingColor={''}
compareHeadingSize={12}
compareHeadingStyle={{}}
compareHeadingAlign={'left'}
rowAlign={'left'}
compareRowTitleColor={''}
compareRowTitleSize={12}
compareRowTitleStyle={{}}
rowBorderColor={''}
tableRootStyle={{}}
rowData={[
{
id: 1,
title: 'Import Data from Cloud Storage Services',
Personal: '',
Starter: <TickIcon />,
Professional: <TickIcon />,
style: {},
},
]}
columnData={[
{ id: 1, key: 'title', title: 'Titles', style: {} },
]}
/>Props
| Name | Description | Default | Control |
|---|---|---|---|
| compareHeadingColor | string | "" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| compareHeadingSize | number | 12 | 12 |
| compareHeadingStyle | SxProps<{}> | { } | compareHeadingStyle : {} |
| compareHeadingAlign | "center" or "left" or "right" | center | center |
| compareRowTitleColor | string | "" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| compareRowTitleSize | number | 12 | 12 |
| compareRowTitleStyle | SxProps<{}> | { } | compareRowTitleStyle : {} |
| rowBorderColor | string | "" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| tableRootStyle | SxProps<{}> | { } | tableRootStyle : {} |
| rowData | RowDataProps[] | [] | [] |
| columnData | columnData [] | [] | [] |
| className | string | - | Set string |
| id | string | string | string |
| sx | SxProps<Theme> | - | Set object |
0.0.2
8 months ago