Context widgets
Compare
- Auto-selected: no (set
ui:widgetexplicitly) ui:options: none
context: {
data: {
options: [
{
image: "https://example.com/option-a.png",
source: "Design Team A",
resolution: "1920x1080",
},
{
image: "https://example.com/option-b.png",
source: "Design Team B",
resolution: "1920x1080",
},
],
},
ui: {
options: {
"ui:widget": "compare",
items: {
image: { "ui:widget": "image" },
},
},
},
}Inbox preview
Rendered by the dashboard (static preview route). Matches docs light/dark mode. Handle actions are disabled; use the toolbar to submit this example to your inbox or view its configuration.
Context
{
"data": {
"options": [
{
"image": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
"source": "Design Team A",
"resolution": "1920x1080"
},
{
"image": "https://images.unsplash.com/photo-1518837695005-2083093ee35b",
"source": "Design Team B",
"resolution": "1920x1080"
}
]
},
"ui": {
"options": {
"ui:title": "Image comparison",
"ui:widget": "compare",
"items": {
"image": {
"ui:widget": "image"
},
"source": {
"ui:title": "Source"
},
"resolution": {
"ui:title": "Resolution"
}
}
}
}
}See also
This widget also appears in the full Image Comparison task example.