Layout recipes
Short recipes for chrome / layout atoms used in top-nav and character/loadout screens. Storybook: Samples~/Storybook (icon-rail, wedge-slider, parallax-stack, app-bar).
SusIconRail
Vertical (default) or horizontal category / loadout strip of circular items.
| Prop | Role |
|---|---|
Items | List<RailItem> — Label, Value, Icon, Disabled |
Model | Selected Value (or index string) |
Direction | vertical | horizontal |
OnChanged | Action<string> |
Root layout may need consumer USS overrides: Sharq scoping breaks self-target on .sus-icon-rail — put unscoped root rules in companion / theme USS.
SusWedgeSlider
Segmented “volume wedge” (rising bars). Click along the row to set filled segment count.
| Prop | Role |
|---|---|
Label | Optional caption |
Value / Segments | Filled count 0…Segments |
ShowValue / ValueText | Numeric readout |
Disabled | Blocks input |
OnChanged | Action<int> |
Helper: Bind(label, filled, segments = 10).
SusParallaxStack
Pointer-driven layered stack: bg → pattern → subject → ui (tips) → chrome.
| Prop | Role |
|---|---|
PatternAmp / SubjectAmp / UiAmp | Parallax amplitude (px) |
Call EnsureLayers() after build to resolve Bg, Pattern, Subject, Ui, TipHost, Chrome. Add children into those layers; stack handles pointer move + lerp.
SusAppBar
Top strip with prepend / default / append slots (+ optional extension when Prominent).
| Prop | Role |
|---|---|
Title | Label in content |
Density | default | compact | comfortable |
Color | primary | secondary | … | surface |
Flat / Absolute / Prominent | Visual / position modifiers |
Recipe: default slot = SusTabs; append = currency / action SusChips (see Storybook app-bar).