Responsive
Responsive selects one child from ordered breakpoint cases plus a required fallback.
const PHONE_BREAKPOINT: f32 = 720.0;
const TABLET_BREAKPOINT: f32 = 1_120.0;
Responsive::new(DesktopLayout)
.id(WidgetId::explicit("settings.responsive"))
.case(ResponsiveCase::max_width(PHONE_BREAKPOINT, PhoneLayout))
.case(ResponsiveCase::between(
PHONE_BREAKPOINT,
TABLET_BREAKPOINT,
TabletLayout,
))
.into()
Fields
Field | Type | Meaning |
|---|---|---|
id | Option<WidgetId> | Stable identity for diagnostics and retained branch structure. |
query | ResponsiveQuery | Width source: viewport or parent container. |
cases | Vec<ResponsiveCase> | Ordered breakpoint cases. First match wins. |
fallback | Widget | Rendered when no case matches. |
Cases
Constructor | Meaning |
|---|---|
ResponsiveCase::min_width(width, child) | Matches widths greater than or equal to width. |
ResponsiveCase::max_width(width, child) | Matches widths below width. |
ResponsiveCase::between(min, max, child) | Matches min <= width < max. |
Use .container_query() when a reusable component should respond to parent constraints instead of the full viewport.
Fission
A cross-platform, GPU-accelerated user interface framework for Rust. MIT licensed.
Copyright (c) 2026 Fission
Ready to use today. Widget APIs are expected to remain stable; some runtime and shell APIs may change before 1.0.0.
Fission 0.9.2