@salutejs/sdds-srvc v0.9.0
Библиотека компонентов SDDS SRVC
Реализация компонентов для создания веб-приложений.
Использование
Компоненты реализованы на 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/sdds-srvc @salutejs/plasma-typo @salutejs/plasma-tokens
Настройка
Создайте компонент для подключения глобальных стилей:
import { createGlobalStyle } from 'styled-components';
import { standard } from '@salutejs/plasma-typo';
import { sdds_srvc__light } from '@salutejs/plasma-tokens';
const ThemeStyle = createGlobalStyle(sdds_srvc__light);
const TypoStyle = createGlobalStyle(standard);
export const GlobalStyle = () => (
<>
<ThemeStyle />
<TypoStyle />
</>
);
Корень приложения
В корне приложения вызовите компонент глобальных стилей GlobalStyle
:
- Если вы используете Create React App, делайте вызов внутри
src/index.tsx
. - Если вы используете Next.js, создайте файл
pages/_app.tsx
и подключите стили в нем.
Для корректной работы server side rendering приложение нужно обернуть SSRProvider
(доступен в sdds-srvc);
Использование компонентов
Все компоненты доступны из папки components
или напрямую из пакета:
// App.tsx
import { Button } from '@salutejs/sdds-srvc';
import { textAccent } from '@salutejs/plasma-tokens/brands/sdds-srvc';
export const App = () => {
return (
<Button>Hello, Plasma!</Button>
<p style={{color: textAccent}}>
Token usage example
</p>
);
};
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago