Рецепты layout

Короткие рецепты для chrome- и layout-атомов, используемых на экранах top-nav и character/loadout. Storybook: Samples~/Storybook (icon-rail, wedge-slider, parallax-stack, app-bar).

---

SusIconRail

Вертикальная (по умолчанию) или горизонтальная полоса круглых элементов для category / loadout.

Prop	Роль
Items	List<RailItem> — Label, Value, Icon, Disabled
Model	Выбранное Value (или строка индекса)
Direction	vertical | horizontal
OnChanged	Action<string>

Layout корня может потребовать переопределений USS на стороне потребителя: Sharq scoping ломает self-target на .sus-icon-rail — помещайте unscoped-правила для root в companion / theme USS.

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• keyboard-focus
• sus-icon-rail__icon
• sus-icon-rail__item
• sus-icon-rail__item--active
• sus-icon-rail__item--disabled
• sus-icon-rail__item--h
• sus-icon-rail__label
• sus-icon-rail--horizontal
• sus-icon-rail--vertical

---

SusWedgeSlider

Сегментированный «volume wedge» (растущие столбики). Клик по строке задаёт количество заполненных сегментов.

Prop	Роль
Label	Опциональная подпись
Value / Segments	Количество заполненных 0…Segments
ShowValue / ValueText	Числовое отображение
Disabled	Блокирует ввод
OnChanged	Action<int>

Хелпер: Bind(label, filled, segments = 10).

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• keyboard-focus
• sus-wedge-slider
• sus-wedge-slider__label
• sus-wedge-slider__row
• sus-wedge-slider__row--grow
• sus-wedge-slider__seg
• sus-wedge-slider__seg--h1
• sus-wedge-slider__seg--h10
• sus-wedge-slider__seg--h11
• sus-wedge-slider__seg--h12
• sus-wedge-slider__seg--h13
• sus-wedge-slider__seg--h14
• sus-wedge-slider__seg--h15
• sus-wedge-slider__seg--h16
• sus-wedge-slider__seg--h2
• sus-wedge-slider__seg--h3
• sus-wedge-slider__seg--h4
• sus-wedge-slider__seg--h5
• sus-wedge-slider__seg--h6
• sus-wedge-slider__seg--h7
• sus-wedge-slider__seg--h8
• sus-wedge-slider__seg--h9
• sus-wedge-slider__seg--on
• sus-wedge-slider__value
• sus-wedge-slider__wrap
• sus-wedge-slider--disabled

---

SusParallaxStack

Управляемый указателем (pointer) слоистый стек: bg → pattern → subject → ui (tips) → chrome.

Prop	Роль
PatternAmp / SubjectAmp / UiAmp	Амплитуда parallax (px)

Вызовите EnsureLayers() после build, чтобы получить Bg, Pattern, Subject, Ui, TipHost, Chrome. Добавляйте детей в эти слои; стек сам обрабатывает pointer move + lerp.

Картинки фона. SetLayers(список SusParallaxLayer) добавляет слои-картинки между Bg и Pattern в порядке списка, первая запись — самая дальняя; список не сортируется по глубине (sus-parallax-stack__layers / sus-parallax-stack__layer; Depth = ход в px у края стека, 0 — неподвижно, отрицательное — против указателя; размер и выпуск за край — в USS). null или пустой список убирает их. Фон под контентом экрана не получает собственных событий указателя: TrackPointer(screenRoot) следит за указателем над другим элементом. PauseOnFocusLoss = true ставит стек на паузу, пока у окна нет фокуса (sus-parallax-stack--unfocused), и SusMotion.Reduce тоже его останавливает (sus-parallax-stack--reduced).

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sus-parallax-stack
• sus-parallax-stack__bg
• sus-parallax-stack__chrome
• sus-parallax-stack__layer
• sus-parallax-stack__layers
• sus-parallax-stack__pattern
• sus-parallax-stack__subject
• sus-parallax-stack__tips
• sus-parallax-stack__ui
• sus-parallax-stack--off

---

SusAppBar

Верхняя полоса со слотами prepend / default / append (+ опциональный extension при Prominent).

Prop	Роль
Title	Подпись в контенте
Density	default | compact | comfortable
Color	primary | secondary | … | surface
Flat / Absolute / Prominent	Модификаторы вида / позиционирования

Рецепт: default-слот = SusTabs; append = SusChip для currency / action (см. Storybook app-bar).

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sus-app-bar
• sus-app-bar__append
• sus-app-bar__content
• sus-app-bar__extension
• sus-app-bar__prepend
• sus-app-bar__row
• sus-app-bar__title
• sus-app-bar--absolute
• sus-app-bar--danger
• sus-app-bar--flat
• sus-app-bar--info
• sus-app-bar--primary
• sus-app-bar--prominent
• sus-app-bar--secondary
• sus-app-bar--success
• sus-app-bar--surface
• sus-app-bar--warning
• sus-hidden
• sus-slot