Библиотека компонентов "PLASMA-WEB"
Реализация компонентов для создания веб-приложений.
Использование
Данный раздел описывает новый способ подключения и использования токенов. Если вы новый пользователь библиотеки, то для вас этот вариант будет наиболее актуальным.
Компоненты реализованы на typescript с помощью react и styled-components;
Использование данного пакета предполагает установку зависимостей: react
& react-dom
;
Использование styled-components
на проект необязательно, так же как и использование typescript
.
Но для того чтобы компоненты работали корректно необходимо установить styled-components.
Установка зависимостей
$ npm install --save react react-dom
$ npm install --save @salutejs/plasma-web @salutejs/plasma-themes
Так же надо установить пакет styled-components. Примечание: Важно использовать версию пакета 5.3.1
$ npm install --save styled-components@5.3.1
Подключение тем
Типографическая система основана на фирменных шрифтах. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN.
Для использования типографической системы необходимо загрузить два css
файла в зависимости от используемых шрифтов в теме.
Их необходимо доб авить внутрь тега head
. Если в качестве основы web-приложения вы используете create-react-app, вам необходимо изменить файл ./public/index.html
.
<html>
<head>
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
<link
rel="stylesheet"
href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
/>
</head>
<body>
...
</body>
</html>
С помощью styled-component
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/plasma-web';
import { plasma_web__light } from '@salutejs/plasma-themes';
const Theme = createGlobalStyle(plasma_web__light);
const App = () => {
return (
<>
<Theme />
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;
С помощью emotion
import React from 'react';
import { Global, css } from '@emotion/react';
import { Button, BodyL } from '@salutejs/plasma-web';
import { plasma_web__light } from '@salutejs/plasma-themes';
const themeStyle = css(plasma_web__light);
const App = () => {
return (
<>
<Global styles={themeStyle} />
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;
С помощью импорта css
файла
import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-web';
import '@salutejs/plasma-themes/css/plasma_web__dark.css';
const App = () => {
return (
<>
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;
С помощью импорта модульного css
файла
Потребуется дополнительно настроить TypeScript
import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-web';
import styles from '@salutejs/plasma-themes/css/plasma_web.module.css';
const App = () => {
return (
<div className={styles.dark}>
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</div>
);
};
export default App;
Смена тем
Пример на styled-components
:
import React, { useState } from 'react';
import { createGlobalStyle } from 'styled-components';
import { Switch } from '@salutejs/plasma-web';
import { plasma_web__light, plasma_web__dark } from '@salutejs/plasma-themes';
import './style.css';
const LightTheme = createGlobalStyle(plasma_web__light);
const DarkTheme = createGlobalStyle(plasma_web__dark);
const App = () => {
const [theme, setTheme] = useState('light');
return (
<>
{theme === 'light' ? <LightTheme /> : <DarkTheme />}
<div className="wrapper">
<Switch
label="dark theme: "
onChange={() => {
setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
}}
/>
</div>
</>
);
};
export default App;
Пример на emotion
:
import React, { useState } from 'react';
import { Global, css } from '@emotion/react';
import { Switch } from '@salutejs/plasma-web';
import { plasma_web__light, plasma_web__dark } from '@salutejs/plasma-themes';
import './style.css';
const lightThemeStyle = css(plasma_web__light);
const darkThemeStyle = css(plasma_web__dark);
const App = () => {
const [theme, setTheme] = useState('light');
return (
<>
<Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
<div className="wrapper">
<Switch
label="dark theme: "
onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
/>
</div>
</>
);
};
export default App;
Пример на css-modules
:
import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/plasma-web';
import webThemes from '@salutejs/plasma-themes/css/plasma_web.module.css';
import './style.css';
const App = () => {
const [theme, setTheme] = useState('light');
useLayoutEffect(() => {
document.documentElement.className = webThemes[theme];
}, [theme]);
return (
<div className="wrapper">
<Switch
label="dark theme: "
onChange={() => {
setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
}}
/>
</div>
);
};
export default App;
Пример на css
:
import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/plasma-web';
// добавьте импорт в css файл
// @import '@salutejs/plasma-themes/css/plasma_web.module.css';
import './style.css';
const App = () => {
const [theme, setTheme] = useState('light');
useLayoutEffect(() => {
document.documentElement.className = theme;
}, [theme]);
return (
<div className="wrapper">
<Switch
label="dark theme: "
onChange={() => {
setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
}}
/>
</div>
);
};
export default App;