Floating Tab Bar

Плавающая стеклянная панель вкладок. Pro · Эффекты › Стекло

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add floating-tab-bar

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FloatingTabBar } from 'valyro-ui-pro';

Prop	Type	Default
`items` *	`FloatingTabBarItem[]`		Tabs in order, each an icon over a label; without a value the first enabled one is current.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`accessory`	`FloatingTabBarAccessory`		A separate circular button beside the bar, such as Search.
`scrollContainer`	`RefObject<HTMLElement \| null> \| 'window'`		Scrolling this container (or the window) down minimizes the bar to a compact pill; scrolling up, reaching the top or focusing the bar with the keyboard expands it.
`minimized`	`boolean`		Controlled `minimized`; use with `onMinimizedChange`.
`defaultMinimized`	`boolean`	`false`	Initial `minimized` when uncontrolled.
`onMinimizedChange`	`(minimized: boolean) => void`		Called with the new `minimized` when it changes.
`position`	`'fixed' \| 'absolute' \| 'static'`	`'fixed'`	`fixed` floats over the viewport, `absolute` over the nearest positioned ancestor; both keep clear of safe-area insets.
`labels`	`Partial<FloatingTabBarLabels>`		Overrides for the built-in English text; keys left out keep their defaults.