1.95.0 • Published 2 years ago

@sberdevices/plasma-ui v1.95.0

Weekly downloads
-
License
Sber Public Licen...
Repository
github
Last release
2 years 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 @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc

Настройка

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

// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';
import { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@sberdevices/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 '@sberdevices/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 '@sberdevices/ui/components/Grid';
import { Button } from '@sberdevices/ui';

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

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

import { animatedScrollToX } from '@sberdevices/ui/utils';
import { addFocus } from '@sberdevices/ui/mixins';
import { withAutoFocus } from '@sberdevices/ui/hocs';

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

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

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

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

1.94.0

2 years ago

1.92.0

2 years ago

1.93.0

2 years ago

1.95.0

2 years ago

1.91.0

2 years ago

1.87.0

2 years ago

1.89.0

2 years ago

1.90.0

2 years ago

1.88.0

2 years ago

1.83.0

2 years ago

1.85.0

2 years ago

1.85.1

2 years ago

1.76.2

2 years ago

1.76.0

2 years ago

1.76.1

2 years ago

1.78.0

2 years ago

1.78.1

2 years ago

1.79.0

2 years ago

1.77.2-alpha.1

2 years ago

1.81.0

2 years ago

1.81.1

2 years ago

1.81.2

2 years ago

1.81.3

2 years ago

1.81.4

2 years ago

1.82.0

2 years ago

1.82.1

2 years ago

1.82.2

2 years ago

1.82.3

2 years ago

1.84.0

2 years ago

1.84.1

2 years ago

1.86.0

2 years ago

1.77.1

2 years ago

1.77.0

2 years ago

1.80.0

2 years ago

1.80.1

2 years ago

1.70.0

2 years ago

1.61.1

2 years ago

1.61.0

2 years ago

1.72.0

2 years ago

1.63.0

2 years ago

1.63.1

2 years ago

1.74.0

2 years ago

1.74.1

2 years ago

1.74.2

2 years ago

1.65.0

2 years ago

1.68.0

2 years ago

1.71.0

2 years ago

1.71.1

2 years ago

1.62.0

2 years ago

1.73.0

2 years ago

1.64.0

2 years ago

1.75.0

2 years ago

1.75.1

2 years ago

1.66.0

2 years ago

1.67.0

2 years ago

1.67.1

2 years ago

1.69.0

2 years ago

1.60.1

2 years ago

1.60.0

2 years ago

1.59.0

2 years ago

1.53.0

3 years ago

1.55.2

3 years ago

1.55.1

3 years ago

1.55.3

3 years ago

1.54.0

3 years ago

1.56.1

3 years ago

1.56.0

3 years ago

1.55.0

3 years ago

1.57.0

3 years ago

1.58.1

3 years ago

1.58.0

3 years ago

1.58.3

3 years ago

1.58.2

3 years ago

1.51.1

3 years ago

1.52.0

3 years ago

1.50.2

3 years ago

1.51.0

3 years ago

1.50.1

3 years ago

1.50.0

3 years ago

1.49.0

3 years ago

1.48.1

3 years ago

1.48.0

3 years ago

1.47.1

3 years ago

1.46.4

3 years ago

1.47.0

3 years ago

1.46.0

3 years ago

1.46.2

3 years ago

1.46.1

3 years ago

1.46.3

3 years ago

1.44.1

3 years ago

1.45.0

3 years ago

1.43.0

3 years ago

1.44.0

3 years ago

1.42.0

3 years ago

1.40.0

3 years ago

1.41.0

3 years ago

1.38.2

3 years ago

1.38.1

3 years ago

1.39.0

3 years ago

1.38.0

3 years ago

1.37.0

3 years ago

1.35.1

3 years ago

1.35.0

3 years ago

1.36.0

3 years ago

1.32.0

3 years ago

1.34.0

3 years ago

1.33.0

3 years ago

1.31.1

3 years ago

1.31.0

3 years ago

1.30.2

3 years ago

1.30.1

3 years ago

1.29.0

3 years ago

1.30.0

3 years ago

1.27.2

3 years ago

1.27.3

3 years ago

1.27.0

3 years ago

1.27.1

3 years ago

1.28.0

3 years ago

1.25.0

3 years ago

1.26.0

3 years ago

1.24.1

3 years ago

1.23.0

3 years ago

1.23.1

3 years ago

1.24.0

3 years ago

1.22.0

3 years ago

1.22.1

3 years ago

1.21.0

3 years ago

1.19.1

3 years ago

1.20.0

3 years ago

1.19.0

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.17.1

3 years ago

1.17.0

3 years ago

1.16.0

3 years ago

1.15.2

3 years ago

1.15.1

3 years ago

1.15.0

3 years ago

1.14.2

3 years ago

1.14.1

3 years ago

1.14.0

3 years ago

1.13.0

3 years ago

1.12.0

3 years ago

1.11.0

3 years ago

1.10.0

3 years ago

1.9.0

3 years ago

1.8.0

3 years ago

1.7.0

3 years ago

1.6.3

3 years ago

1.6.2

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago

0.98.0-rc.0

3 years ago

0.97.4-rc.0

3 years ago