StickyBar

StickyBar — липкий бар над списком (поиск, фильтры): при прокрутке прилипает к верху ближайшего скролла и остаётся под рукой на длинном списке.

По мере приближения к верху проявляется подложка на всю ширину скролла с бордером снизу — в цвет шапки панели, так что прилипший бар читается её продолжением. Проявление идёт за скроллом, а не по таймеру.

children — функция от состояния бара: isStuck (прилип), isDrawerOpen (раскрыта выдвижная секция) и toggleDrawer. По ним содержимое меняет разметку — например, показывает у прилипшего поиска кнопку фильтров.

StickyBar.Drawer — выдвижная секция под баром: в потоке раскрыта всегда, у прилипшего бара сворачивается и выезжает по toggleDrawer. Содержимое не перемонтируется — состояние внутри секции переживает сворачивание. Когда бар отлипает, раскрытие сбрасывается.

Бар ищет ближайшего предка с overflow-y: auto | scroll — обычно это Panel.Content. Липнет он в границах родителя, поэтому список должен лежать с баром в одном контейнере: обёртка только вокруг бара не даст ему прилипнуть. Своего отступа снизу у бара нет — его задаёт гап контейнера.

Анатомия

StickyBar.Root
Children (state) => ReactNode
Bar (поиск и т.п.)
StickyBar.Drawer
Children

Примеры

Без выдвижной секции

Только поиск: StickyBar.Drawer необязателен, состояние бара можно не читать.

API

PropTypeDefault
children*

Содержимое — от состояния бара: поле с кнопкой, StickyBar.Drawer

(state: StickyBarState) => ReactNode-
classNamestring-

StickyBar.Drawer

Выдвижная секция под баром — используется только внутри StickyBar.Root. В потоке раскрыта, у прилипшего бара свёрнута до toggleDrawer.

PropTypeDefault
children*ReactNode-