⟷
Pager
Swipeable horizontal pager with scroll-snap pages and configurable indicator dots.
type: "pager"layoutscontainer
Basic 3-Page Pager
Swipeable pages with dot indicator
Page 1
Page 2
Page 3
{
"type": "pager",
"data": {
"children": [
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Page 1",
"ui": {
"style": {
"typography": {
"style": "heading2"
},
"textAlign": "center",
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 40
},
"size": {
"width": "fill"
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Page 2",
"ui": {
"style": {
"typography": {
"style": "heading2"
},
"textAlign": "center",
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "success",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 40
},
"size": {
"width": "fill"
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Page 3",
"ui": {
"style": {
"typography": {
"style": "heading2"
},
"textAlign": "center",
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 40
},
"size": {
"width": "fill"
}
}
}
}
}
}
}
],
"pager": {
"page_size": 1,
"indicator": {
"selected": {
"color": {
"palette": "primary",
"shade": 500
},
"radius": 4
},
"unselected": {
"color": {
"palette": "neutral",
"shade": 200
},
"radius": 4
}
}
},
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Quick Start
Quick Start
{
"type": "pager",
"data": {}
}Data Fields
| Field | Type | Default | Description |
|---|---|---|---|
pager | string | — | Pager configuration object (page_size, min_height, spacing, indicator, auto_scroll, loop) |
Style Fields
Layout Fields
| Field | Type | Default | Description |
|---|---|---|---|
spacing | int | 0 | Gap between pages in dp |
Parent Layout Fields
Examples
Pill Indicator (over)
Dots inside a rounded pill overlaid on content
{
"type": "pager",
"data": {
"children": [
{
"type": "pager_page",
"data": {
"child": {
"type": "image",
"data": {
"url": "https://picsum.photos/seed/p1/400/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill",
"height": 180
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "image",
"data": {
"url": "https://picsum.photos/seed/p2/400/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill",
"height": 180
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "image",
"data": {
"url": "https://picsum.photos/seed/p3/400/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill",
"height": 180
}
}
}
}
}
}
}
],
"pager": {
"page_size": 1,
"indicator": {
"placement": "over",
"selected": {
"color": {
"hex": "#FFFFFF"
},
"radius": 4
},
"unselected": {
"color": {
"hex": "#FFFFFF66"
},
"radius": 4
},
"container": {
"background": {
"hex": "#00000066"
},
"corner_radius": 12
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
},
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Peek with Loop (page_size: 0.85)
Centered pages with peek + infinite loop auto-scroll
Card C
Card A
Card B
Card C
Card A
{
"type": "pager",
"data": {
"children": [
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Card A",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 32
},
"size": {
"width": "fill"
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Card B",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 32
},
"size": {
"width": "fill"
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Card C",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"textAlign": "center",
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 32
},
"size": {
"width": "fill"
}
}
}
}
}
}
}
],
"pager": {
"page_size": 0.85,
"loop": true,
"auto_scroll": {
"enabled": true,
"interval_ms": 3000
},
"indicator": {
"selected": {
"color": {
"palette": "primary",
"shade": 500
},
"radius": 5
},
"unselected": {
"color": {
"palette": "neutral",
"shade": 200
},
"radius": 3
},
"container": {
"background": {
"hex": "#00000033"
},
"corner_radius": 12
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
},
"spacing": 6
}
}
},
"ui": {
"layout": {
"spacing": 12,
"size": {
"width": "fill"
}
}
}
}
}Under-Placement Indicator
Indicator dots below the pager content
Slide 1
Slide 2
{
"type": "pager",
"data": {
"children": [
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Slide 1",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"textAlign": "center",
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "purple",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 32
},
"size": {
"width": "fill"
}
}
}
}
}
}
},
{
"type": "pager_page",
"data": {
"child": {
"type": "text",
"data": {
"value": "Slide 2",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"textAlign": "center",
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "pink",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"all": 32
},
"size": {
"width": "fill"
}
}
}
}
}
}
}
],
"pager": {
"page_size": 1,
"indicator": {
"placement": "under",
"position": "bottom_center",
"selected": {
"color": {
"palette": "purple",
"shade": 500
},
"radius": 5
},
"unselected": {
"color": {
"palette": "neutral",
"shade": 200
},
"radius": 5
},
"container": {
"background": {
"palette": "neutral",
"shade": 50
},
"corner_radius": 8,
"border": {
"width": 1,
"color": {
"palette": "neutral",
"shade": 200
}
}
},
"layout": {
"padding": {
"horizontal": 16,
"vertical": 8
},
"spacing": 8
}
}
},
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}