epn-ui
v3.9.22
Published
Дизайн система кабинета ВМ
Downloads
1,395
Readme
epn-ui
Дизайн система кабинета ВМ
Компоненты построены с использованием tailwindcss и headless-ui
Классы компонентов должны начинаться с префикса epn-
Для написания стилей используется методология БЭМ
Дополнительно:
Подключение
Этот пакет распространяется через npm.
yarn add epn-ui
Дизайн система использует иконки FontAwesome:
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons
Создайте файл .npmrc
в корне проекта и пропишите ваш _authToken для FontAwesome:
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<Ваш _authToken>
Добавьте стили компонентов перед стилями проекта:
import 'epn-ui/umd/style.css';
Начало работы
Чтобы начать работу импортируйте компонент:
import { Button } from 'epn-ui';
import 'epn-ui/umd/style.css';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Button type="primary" onClick={() => {console.log('save')}}>Save</Button>
</header>
</div>
);
}
export default App;
Разработка
yarn dev
Запускает storybook. Чтобы увидеть компоненты нужно перейти на http://localhost:6006/
yarn lint
Запускает линтер
yarn prettier
Запускает автоматическое форматирование кода
yarn build
Запускает production сборку компонентов