Реализация компонентов для создания смартаппов.
Компоненты реализованы на 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';
// Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import { darkSber } from '@salutejs/plasma-tokens/themes';
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 />
</>
);
// Типографика, имеющая размеры, зависимые от типа устройства
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.