Утилиты
animatedScrollToX
/ animatedScrollToY
#
Плавная прокрутка по оси X и Y.
import React from 'react';import { animatedScrollToX } from '@salutejs/plasma-web';
const ScrollComponent: React.FC = ({ children }) => { const ref = React.useRef(null);
React.useLayoutEffect(() => { if (ref.current) { // Плавный скролл на 400px после первого рендера компонента animatedScrollToX(ref.current, 400); } }, []);
return <div ref={ref}>{children}</div>;};
convertRoundnessMatrix
#
По заданному шаблону-матрице выводит значения для border-radius
.
Значение символов: r
- радиус стандартный, h
- радиус округлый (вычисляется из высоты).
import styled from 'styled-components';import { convertRoundnessMatrix } from '@salutejs/plasma-web';
// Выведет значение для border-radius, равное '1em 2em 2em 1em'const Box = styled.div` border-radius: ${convertPinsMatrix('r h h r', '1em', '2em')};`;
detectDevice
#
Возвращает тип устройства, на котором запущено приложение.
При запуске в серверном окружении возвращает sberBox.
Для определения устройства используется navigator.userAgent
.
import { detectDevice } from '@salutejs/plasma-web';
// Вернет "SberPortal" или "SberBox" или "mobile" (для всех остальных устройств)const deviceKind = detectDevice();
mediaQuery
#
Обертка над css-медиазапросами с заранее определенными брейкпоинтами.
Для корректной работы на разных поверхностях, необходимо указывать второй параметр
deviceScale
.
import styled, { css } from 'styled-components';import { mediaQuery, breakpoints } from '@salutejs/plasma-web';
// Определяем поверхностьconst deviceScale = 2;
// Блок Box примет красный цвет фона на больших экранахconst Box = styled.div` ${mediaQuery('XL', deviceScale)(css` background: red; `)};`;
// Возможно использование массива `breakpoints`, в котором перечислен список разрешенийconst colors = { xl: 'azure' lg: 'aliceblue' md: 'aquamarine' sm: 'cadetblue'};const Text = styled.span` ${breakpoints.map((breakpoint) => mediaQuery(breakpoint)(css` color: ${colors[breakpoint]}; `) )}`;