StickyBar
StickyBar — липкий бар над списком (поиск, фильтры): при прокрутке прилипает к верху ближайшего скролла и остаётся под рукой на длинном списке.
По мере приближения к верху проявляется подложка на всю ширину скролла с бордером снизу — в цвет шапки панели, так что прилипший бар читается её продолжением. Проявление идёт за скроллом, а не по таймеру.
children — функция от состояния бара: isStuck (прилип), isDrawerOpen (раскрыта выдвижная секция) и toggleDrawer. По ним содержимое меняет разметку — например, показывает у прилипшего поиска кнопку фильтров.
StickyBar.Drawer — выдвижная секция под баром: в потоке раскрыта всегда, у прилипшего бара сворачивается и выезжает по toggleDrawer. Содержимое не перемонтируется — состояние внутри секции переживает сворачивание. Когда бар отлипает, раскрытие сбрасывается.
Бар ищет ближайшего предка с overflow-y: auto | scroll — обычно это Panel.Content. Липнет он в границах родителя, поэтому список должен лежать с баром в одном контейнере: обёртка только вокруг бара не даст ему прилипнуть. Своего отступа снизу у бара нет — его задаёт гап контейнера.
Анатомия
Примеры
Без выдвижной секции
Только поиск: StickyBar.Drawer необязателен, состояние бара можно не читать.
API
| Prop | Type | Default |
|---|---|---|
children*Содержимое — от состояния бара: поле с кнопкой, | (state: StickyBarState) => ReactNode | - |
className | string | - |
StickyBar.Drawer
Выдвижная секция под баром — используется только внутри StickyBar.Root. В потоке раскрыта, у прилипшего бара свёрнута до toggleDrawer.
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | - |