1.290.0 • Published 2 months ago

@salutejs/plasma-ui v1.290.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

Библиотека компонентов Plasma UI

Реализация компонентов для создания смартаппов.

Использование

Компоненты реализованы на typescript с помощью react и styled-components;

Использование данного пакета предполагает использование react & react-dom; Использование styled-components на проект не обязательно, также как и использование typescript. Но для того чтобы комопненты работали styled-components необходимо установить.

Установка пакета

$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons

Настройка

Подключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью DeviceThemeProvider:

// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';
import { darkSber } from '@salutejs/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@salutejs/plasma-tokens';

const DocumentStyle = createGlobalStyle`
    html:root {
        min-height: 100vh;
        color: ${text};
        background-color: ${background};
        background-image: ${gradient};
    }
`;
const ThemeStyle = createGlobalStyle(darkSber);
export const GlobalStyle = () => (
    <>
        <DocumentStyle />
        <ThemeStyle />
    </>
);
// index.tsx
import { DeviceThemeProvider } from '@salutejs/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства
import { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)
import { App } from './App';

ReactDOM.render(
    <DeviceThemeProvider>
        <GlobalStyle />
        <App />
    </DeviceThemeProvider>,
    document.getElementById('root'),
);

Подробнее о стилях и типографике.

Использование компонентов

Все компоненты доступны из папки components или напрямую из пакета:

// App.tsx
import { Container } from '@salutejs/plasma-ui/components/Grid';
import { Button } from '@salutejs/plasma-ui';

export const App = () => {
    return (
        <Container>
            <Button>Hello, Plasma!</Button>
        </Container>
    );
};

Библиотека предоставляет вспомогательную функциональность - utils, mixins, hocs, доступную в соответствующих директориях. Пример импорта:

import { animatedScrollToX } from '@salutejs/plasma-ui/utils';
import { addFocus } from '@salutejs/plasma-ui/mixins';
import { withAutoFocus } from '@salutejs/plasma-ui/hocs';

Подробнее можно ознакомиться на страницах документации по hocs, mixins и utils.

Полезные ссылки:

Витрина с компонентами Storybook.

Документация.

Репозиторий.

1.292.0-dev.0

2 months ago

1.291.0-dev.0

2 months ago

1.290.0

2 months ago

1.289.1-dev.0

2 months ago

1.289.0-dev.0

2 months ago

1.288.0

2 months ago

1.288.0-dev.0

2 months ago

1.286.0-dev.0

3 months ago

1.286.0

3 months ago

1.287.0-dev.0

2 months ago

1.285.0

3 months ago

1.284.1-dev.0

3 months ago

1.284.0-dev.0

3 months ago

1.283.0-dev.0

4 months ago

1.283.0

4 months ago

1.282.0-dev.0

4 months ago

1.281.0-dev.0

4 months ago

1.280.0-dev.0

4 months ago

1.279.0-dev.0

4 months ago

1.279.0

4 months ago

1.224.0

1 year ago

1.252.0-dev.0

6 months ago

1.227.0-dev.0

12 months ago

1.257.0-dev.0

6 months ago

1.237.1

10 months ago

1.237.0

10 months ago

1.255.0

6 months ago

1.260.0-dev.0

5 months ago

1.260.1-dev.0

5 months ago

1.278.0-dev.0

4 months ago

1.242.0

9 months ago

1.233.0

10 months ago

1.235.0-dev.0

10 months ago

1.249.0-dev.0

7 months ago

1.250.0

6 months ago

1.236.0-dev.0

10 months ago

1.256.1-dev.0

6 months ago

1.274.0-dev.0

4 months ago

1.256.2-dev.0

6 months ago

1.228.1

11 months ago

1.228.0

11 months ago

1.266.0-dev.0

4 months ago

1.230.0-dev.0

11 months ago

1.269.0-dev.0

4 months ago

1.244.0-dev.0

9 months ago

1.264.1-dev.0

5 months ago

1.234.1-dev.0

10 months ago

1.264.0-dev.0

5 months ago

1.258.0

5 months ago

1.240.1-dev.0

9 months ago

1.249.0

7 months ago

1.245.0-dev.0

9 months ago

1.239.0-dev.0

9 months ago

1.232.0-dev.0

11 months ago

1.245.0

8 months ago

1.267.0-dev.0

4 months ago

1.249.1-dev.0

7 months ago

1.275.0

4 months ago

1.274.1-dev.0

4 months ago

1.254.0-dev.0

6 months ago

1.229.0-dev.0

11 months ago

1.251.0-dev.0

6 months ago

1.270.0-dev.0

4 months ago

1.243.1-dev.0

9 months ago

1.273.0-dev.0

4 months ago

1.226.0-dev.0

12 months ago

1.246.1-dev.0

8 months ago

1.246.0-dev.0

8 months ago

1.276.0-dev.0

4 months ago

1.271.0-dev.0

4 months ago

1.246.2-dev.0

8 months ago

1.246.3-dev.0

8 months ago

1.263.0-dev.0

5 months ago

1.248.0

7 months ago

1.259.0-dev.0

5 months ago

1.238.0-dev.0

9 months ago

1.229.1-dev.0

11 months ago

1.224.0-dev.0

1 year ago

1.241.1-dev.0

9 months ago

1.237.2-dev.0

10 months ago

1.225.0-dev.0

12 months ago

1.255.0-dev.0

6 months ago

1.237.3-dev.0

10 months ago

1.261.0

5 months ago

1.230.0

11 months ago

1.239.0

9 months ago

1.233.0-dev.0

10 months ago

1.241.0-dev.0

9 months ago

1.234.0-dev.0

10 months ago

1.234.0-dev.1

10 months ago

1.247.0

8 months ago

1.228.0-dev.0

11 months ago

1.277.0-dev.0

4 months ago

1.247.1-dev.0

8 months ago

1.240.0-dev.0

9 months ago

1.272.0-dev.0

4 months ago

1.265.0

5 months ago

1.256.0-dev.0

6 months ago

1.223.1-dev.0

1 year ago

1.253.0-dev.0

6 months ago

1.237.0-dev.0

10 months ago

1.243.0-dev.0

9 months ago

1.268.0-dev.0

4 months ago

1.231.0-dev.0

11 months ago

1.254.1-dev.0

6 months ago

1.257.1-dev.0

5 months ago

1.262.0-dev.0

5 months ago

1.222.0-dev.0

1 year ago

1.215.0

1 year ago

1.202.0

1 year ago

1.214.0-dev.0

1 year ago

1.219.0-dev.0

1 year ago

1.213.0-dev.0

1 year ago

1.205.0-dev.0

1 year ago

1.206.0

1 year ago

1.201.0

1 year ago

1.210.0-dev.0

1 year ago

1.223.0

1 year ago

1.215.1-dev.0

1 year ago

1.204.0-dev.0

1 year ago

1.217.0-dev.0

1 year ago

1.199.0

1 year ago

1.209.0

1 year ago

1.207.0-dev.0

1 year ago

1.221.1-dev.0

1 year ago

1.220.0-dev.0

1 year ago

1.223.0-dev.0

1 year ago

1.218.0

1 year ago

1.200.0

1 year ago

1.216.0-dev.0

1 year ago

1.211.0-dev.0

1 year ago

1.203.0-dev.0

1 year ago

1.208.0-dev.0

1 year ago

1.215.3-dev.0

1 year ago

1.209.0-dev.0

1 year ago

1.215.2-dev.0

1 year ago

1.221.0-dev.0

1 year ago

1.221.0

1 year ago

1.213.1-dev.0

1 year ago

1.206.0-dev.0

1 year ago

1.218.0-dev.0

1 year ago

1.216.0

1 year ago

1.215.0-dev.0

1 year ago

1.212.0-dev.0

1 year ago

1.192.0

2 years ago

1.198.0

2 years ago

1.194.0

2 years ago

1.196.0

2 years ago

1.191.0

2 years ago

1.191.1

2 years ago

1.193.0

2 years ago

1.198.0-dev.0

2 years ago

1.195.0

2 years ago

1.197.0

2 years ago

1.190.0

2 years ago

1.181.0

2 years ago

1.181.1

2 years ago

1.179.0

2 years ago

1.187.0

2 years ago

1.176.0

2 years ago

1.189.0

2 years ago

1.178.0

2 years ago

1.178.1

2 years ago

1.183.0

2 years ago

1.172.1

2 years ago

1.172.0

2 years ago

1.185.0

2 years ago

1.174.0

2 years ago

1.180.1

2 years ago

1.180.0

2 years ago

1.186.0

2 years ago

1.186.1

2 years ago

1.175.1

2 years ago

1.175.0

2 years ago

1.188.0

2 years ago

1.177.0

2 years ago

1.182.0

2 years ago

1.184.0

2 years ago

1.173.1

2 years ago

1.173.0

2 years ago

1.173.2

2 years ago

1.170.0

2 years ago

1.170.1

2 years ago

1.168.1

2 years ago

1.168.0

2 years ago

1.163.0

2 years ago

1.165.0

2 years ago

1.161.1

2 years ago

1.161.0

2 years ago

1.167.0

2 years ago

1.169.1

2 years ago

1.169.0

2 years ago

1.164.0

2 years ago

1.166.0

2 years ago

1.160.0

2 years ago

1.171.0

2 years ago

1.162.0

2 years ago

1.149.0

2 years ago

1.148.0

2 years ago

1.157.0

2 years ago

1.156.0

2 years ago

1.159.0

2 years ago

1.158.0

2 years ago

1.158.1

2 years ago

1.153.0

2 years ago

1.152.0

2 years ago

1.155.0

2 years ago

1.154.0

2 years ago

1.154.1

2 years ago

1.151.0

2 years ago

1.151.1

2 years ago

1.150.0

2 years ago

1.138.1

2 years ago

1.138.0

2 years ago

1.137.0

2 years ago

1.139.0

2 years ago

1.145.0

2 years ago

1.134.0

2 years ago

1.144.0

2 years ago

1.133.0

2 years ago

1.147.3

2 years ago

1.147.4

2 years ago

1.147.5

2 years ago

1.147.0

2 years ago

1.147.1

2 years ago

1.147.2

2 years ago

1.136.0

2 years ago

1.136.2

2 years ago

1.136.1

2 years ago

1.146.0

2 years ago

1.146.1

2 years ago

1.135.0

2 years ago

1.141.1

2 years ago

1.141.0

2 years ago

1.140.0

2 years ago

1.140.1

2 years ago

1.143.0

2 years ago

1.143.1

2 years ago

1.143.2

2 years ago

1.143.3

2 years ago

1.143.4

2 years ago

1.132.0

2 years ago

1.142.0

2 years ago

1.131.0

2 years ago

1.126.1

2 years ago

1.126.0

2 years ago

1.125.0

2 years ago

1.128.0

2 years ago

1.127.0

2 years ago

1.122.0

2 years ago

1.124.1

2 years ago

1.124.0

2 years ago

1.124.3

2 years ago

1.124.2

2 years ago

1.123.0

2 years ago

1.123.1

2 years ago

1.130.0

2 years ago

1.129.0

2 years ago

1.129.2

2 years ago

1.129.1

2 years ago

1.115.0

2 years ago

1.114.0

2 years ago

1.120.1

2 years ago

1.120.0

2 years ago

1.120.3

2 years ago

1.120.2

2 years ago

1.117.2

2 years ago

1.117.0

2 years ago

1.117.1

2 years ago

1.116.0

2 years ago

1.111.0

3 years ago

1.119.0

2 years ago

1.118.3

2 years ago

1.118.4

2 years ago

1.121.0

2 years ago

1.110.0

3 years ago

1.118.1

2 years ago

1.118.2

2 years ago

1.118.0

2 years ago

1.113.0

2 years ago

1.112.0

2 years ago

1.98.0

3 years ago

1.107.0

3 years ago

1.103.1

3 years ago

1.103.0

3 years ago

1.108.2

3 years ago

1.97.0

3 years ago

1.106.0

3 years ago

1.106.1

3 years ago

1.102.0

3 years ago

1.101.0

3 years ago

1.109.0

3 years ago

1.105.0

3 years ago

1.101.1

3 years ago

1.99.0

3 years ago

1.100.0

3 years ago

1.108.0

3 years ago

1.108.1

3 years ago

1.104.2

3 years ago

1.104.3

3 years ago

1.104.0

3 years ago

1.104.1

3 years ago

1.96.0

3 years ago

2.0.0

3 years ago