SaveBar
Плавающая панель «Сохранить» внизу формы. Позицию и ширину даёт хук useElementBox от колонки контента.
Панель закреплена position: fixed у нижнего края окна и повторяет левый край и ширину переданного box. В
приложении box берётся из useElementBox() на колонке формы — так панель не наезжает на сайдбар.
Живой код — редактируйте
function Example() { const { ref, box } = useElementBox(); const [dirty, setDirty] = useState(true); return ( <div ref={ref} className="relative flex h-60 transform-gpu flex-col items-center gap-3 overflow-hidden pt-10" > <span className="text-14-regular text-fg-secondary"> {dirty ? 'Есть несохранённые изменения' : 'Всё сохранено'} </span> <Button variant="outline" onClick={() => setDirty(true)}> Изменить поле </Button> <SaveBar box={box && { left: 16, width: box.width - 32 }} visible={dirty} onSave={() => setDirty(false)} /> </div> ); } render(<Example />);
transform-gpu на контейнере в примере нужен только витрине: он делает fixed-панель относительной к рамке
превью. В приложении так делать не нужно.
Пропсы
Prop
Type