Миксины (примеси)

Раздел содержит функции-примеси для компонентов, которые стилизуются с помощью styled-components.

Для удобства типизации, каждый модуль, в котором лежит миксин, дополнительно экспортирует соответствующий интерфейс props.

addFocus

Добавляет фокусную рамку компонентам, для которых возможно фокусирование или если передан флаг focused.

import styled from 'styled-components';
import { FocusProps, OutlinedProps, addFocus } from '@salutejs/plasma-web';

const Button = styled.button<FocusProps>`
    ${addFocus}
`;

<Button outlined={true}>Hello!</Button>;

applyBlur

Позволяет применять фильтр размытия к фону компонента.

import styled from 'styled-components';
import { BlurProps, applyBlur } from '@salutejs/plasma-web';

const Button = styled.button<BlurProps>`
    ${applyBlur}
`;

<Button blur="small">Blur on the background</Button>;

applyDisabled

Делает компонент недоступным для взаимодействия, если компонент может быть деактивирован или если передан флаг disabled.

import styled from 'styled-components';
import { DisabledProps, applyDisabled } from '@salutejs/plasma-web';

const Button = styled.button<DisabledProps>`
    ${applyDisabled}
`;

<Button disabled>I'm disabled</Button>;

applyInteraction

Увеличивает/уменьшает компонент при таких видах взаимодействия, как наведение (:hover) и нажатие (:active).

import styled from 'styled-components';
import { InteractionProps, applyInteraction } from '@salutejs/plasma-web/mixins';

const Button = styled.button<InteractionProps>`
    ${applyInteraction}
`;

<Button scaleOnInteraction>Button!</Button>;

applyRoundness

Применяет к компоненту скругление из списка radiuses.

Скругление указывается в пикселях. Пример, roundness={16} = 1rem = 16px (при deviceScale = 1) = 32px (при deviceScale = 2).

import styled from 'styled-components';
import { RoundnessProps, applyRoundness } from '@salutejs/plasma-web';

const Button = styled.button<RoundnessProps>`
    ${applyRoundness}
`;

<Button roundness={16}>Button!</Button>;

applySpacing

См. Стандартные отступы.

applyView

Применяет цвет фона и текста при передаче соответствующего значения в свойство view.

import styled from 'styled-components';
import { ViewProps, applyView } from '@salutejs/plasma-web';

const Button = styled.button<ViewProps>`
    ${applyView}
`;

<Button view="primary">Primary button</Button>;

applyEllipsis

Сокращает текст элемента с помощью многоточия, когда текст не помещается в одной строке.

import styled from 'styled-components';
import { applyEllipsis } from '@salutejs/plasma-web';

const ShortenedLine = styled.span`
    ${applyEllipsis}
`;

<ShortenedLine>Текст сократится, если не поместится в строке</ShortenedLine>;

applyPaper

caution

Данный миксин будет работать только если тема подключена новым способом

Позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы plasma_web:

• backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
• borderRadius - отвечает за скругление углов блока;
• shadow - отвечает за применение стилей теней для блока;
• styles - отвечает за все доступные css свойства.

import { applyPaper } from '@salutejs/plasma-web';

<div
    style={applyPaper({
        backgroundColor: 'surfaceAccent',
        borderRadius: 'borderRadiusM',
        shadow: 'shadowDownHardM',
        styles: {
            color: 'white',
            width: '10rem',
            height: '10rem',
        },
    })}
>
    Test card
</div>

addScrollbar

caution

Стилизация системного scrollbar возможна только в браузерах: Safari, Chrome и на базе Chromium!

Позволяет изменить внешний вид системного scrollbar согласно цветовым токенам темы.

import { addScrollbar } from '@salutejs/plasma-web';

type Size = 's' | 'm';

const ScrollbarContainer = styled.div`
    ${addScrollbar('s')};
`;

<ScrollbarContainer>
    { children }
</ScrollbarContainer>