website/plasma-ui-docs/docs/functions/utils.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/functions/utils.mdx
88 строк3 KB
Fanil Zubairov
chore: Plasma UI documentation website
21 сен 2021, 17:46
21 сен 2021, 17:464fda38e
---
id: utils
title: Утилиты
---

# Утилиты

## `animatedScrollToX` / `animatedScrollToY`
Плавная прокрутка по оси X и Y.

```tsx
import React from 'react';
import { animatedScrollToX } from '@salutejs/plasma-ui';

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` - радиус округлый (вычисляется из высоты).

```tsx
import styled from 'styled-components';
import { convertRoundnessMatrix } from '@salutejs/plasma-ui';

// Выведет значение для border-radius, равное '1em 2em 2em 1em'
const Box = styled.div`
    border-radius: ${convertPinsMatrix('r h h r', '1em', '2em')};
`;
```

## `detectDevice`
Возвращает тип устройства, на котором запущено приложение.
При запуске в серверном окружении возвращает sberBox.
Для определения устройства используется `navigator.userAgent`.

```tsx
import { detectDevice } from '@salutejs/plasma-ui';

// Вернет "SberPortal" или "SberBox" или "mobile" (для всех остальных устройств)
const deviceKind = detectDevice();
```

## `mediaQuery`
Обертка над css-медиазапросами с заранее определенными брейкпоинтами.

> Для корректной работы на разных поверхностях, необходимо указывать второй параметр `deviceScale`.

```tsx
import styled, { css } from 'styled-components';
import { mediaQuery, breakpoints } from '@salutejs/plasma-ui';

// Определяем поверхность
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]};
        `)
    )}
`;
```