react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
179 lines (178 loc) • 5.25 kB
JSON
{
"name": "ColorSwatch",
"category": "form",
"description": "A color swatch component",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
],
"props": [
{
"name": "value",
"type": "string",
"description": "The identifier value of the ColorSwatch in a ColorSwatch palette",
"note": "Must be different than other ColorSwatches in the same group"
},
{
"name": "color",
"type": "string",
"description": "The color of the ColorSwatch"
},
{
"name": "selected",
"type": "boolean",
"description": "Is the initial state is selected"
},
{
"name": "animated",
"type": "boolean",
"description": "Is first render should be animated"
},
{
"name": "onPress",
"type": "(value: string, colorInfo: ColorInfo) => void",
"description": "Callback from press event"
},
{
"name": "index",
"type": "number",
"description": "The index of the Swatch if in array"
},
{
"name": "style",
"type": "ViewStyle",
"description": "Component's style"
},
{
"name": "unavailable",
"type": "boolean",
"description": "Is the initial state is unavailable"
},
{
"name": "size",
"type": "number",
"description": "Color Swatch size"
}
],
"snippet": [
"<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
],
"docs": {
"hero": {
"title": "ColorSwatch",
"description": "A swatch is a sample of a color. Swatches behavior is somewhat similar to this of a RadioButton, so only a single swatch can be selected at a given moment. ",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_cover.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "table",
"columns": [
"Style",
"Default state",
"Selected",
"Unavailable"
],
"items": [
{
"title": "Light color",
"content": [
{
"background": "#E8ECF0",
"props": {
"color": "#FFFFFF"
}
},
{
"background": "#E8ECF0",
"props": {
"color": "#FFFFFF",
"selected": true
}
},
{
"background": "#E8ECF0",
"props": {
"color": "#FFFFFF",
"unavailable": true
}
}
]
},
{
"title": "Dark color",
"content": [
{
"background": "#E8ECF0",
"props": {
"color": "#000000"
}
},
{
"background": "#E8ECF0",
"props": {
"color": "#000000",
"selected": true
}
},
{
"background": "#E8ECF0",
"props": {
"color": "#000000",
"unavailable": true
}
}
]
},
{
"title": "Transparent",
"content": [
{
"background": "#E8ECF0",
"props": {
"transparent": true
}
},
{
"background": "#E8ECF0",
"props": {
"transparent": true,
"selected": true
}
},
{
"background": "#E8ECF0",
"props": {
"transparent": true,
"unavailable": true
}
}
]
}
],
"title": "Swatch Styles and States"
},
{
"type": "section",
"layout": "horizontal",
"title": "Spec",
"description": "markdown:Border width 1px.\n\n‘Unavailable’ swatch can be either tappable or “disabled”. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_spec.png"
}
]
}
]
}
]
}
}