ym88659208ym87991671
Дизайн-система Plasma | Документация SmartMarket
Skip to main content

Дизайн-система Plasma

Plasma — это дизайн-система для создания смартапов Canvas App, которые будут выглядеть как часть экосистемы виртуальных ассистентов. Plasma основывается на React и позволяет упростить разработку внешнего вида приложений.

Дизайн-система включает в себя следующие пакеты:

  • plasma-tokens — содержит набор дизайн-токенов, типографических и цветовых констант. Токены представлены в виде JS-переменных и переменных CSS.
  • ui — содержит набор готовых React-компонентов для создания Canvas App. Вы можете ознакомиться с доступными компонентами в документации и на демонстрационном стенде. Перед использованием компонентов рекомендуем изучить пакет plasma-tokens.

Быстрый старт

Чтобы начать работу с Plasma:

  1. Создайте основу приложения с помощью команды Create React App:

    npx create-react-app my-app
  2. Перейдите в приложение:

    cd my-app
  3. Установите дизайн-систему с зависимостью на styled-components:

    npm i -S styled-components @sberdevices/ui@rc @sberdevices/plasma-tokens@rc
  4. Создайте приложение в файле ./src/App.js:

    import React from 'react';

    import { Button } from '@sberdevices/ui/components/Button/Button';

    function App() {
    return (
    <div className="App">
    <p>
    <Button view="primary">Hello Plasma</Button>
    </p>
    </div>
    );
    }

    export default App;

Подробную информацию об установке и использовании дизайн-системы Plasma вы найдете по ссылке.

Обновлено 16 мая 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней