SDUI Playground

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

FieldTypeDefaultDescription
pager
stringPager configuration object (page_size, min_height, spacing, indicator, auto_scroll, loop)

Style Fields

Layout Fields

FieldTypeDefaultDescription
spacing
int0Gap 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"
        }
      }
    }
  }
}