-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
44 lines (44 loc) · 6.04 KB
/
index.html
File metadata and controls
44 lines (44 loc) · 6.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<title>React Alegrify UI</title>
<link rel="stylesheet" href="https://dejakob.github.io/alegrify-ui/alegrify-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" />
<style>
.preview {
display: block;
background-color: rgba(78, 75, 193, 0.1);
height: 100%;
width: 100%;
}
.preview > div {
padding: 16px;
}
pre[class*=language-].preview__pre {
margin: 0;
}
</style>
</head>
<body class="alegrify-body">
<main class="alegrify-main">
<a href="https://dejakob.github.io/react-alegrify-ui" style="color: #ffffff; display: block; text-align: center; text-decoration: none;" class="alegrify-a" title="React Alegrify UI">
<h1 class="alegrify-h1 alegrify-h1--thin">
React Alegrify UI
</h1>
</a>
<section class="alegrify-section" data-component>
<h1 class="alegrify-h1">React Alegrify UI</h1><p class="alegrify-p"><a class="alegrify-a" target="_blank" rel="noreferrer noopener" href="https://npmjs.org/package/react-alegrify-ui"><img src="https://nodei.co/npm/react-alegrify-ui.png" alt="NPM"/></a></p><h2 class="alegrify-h2">What is React Alegrify UI?</h2><p class="alegrify-p">React Alegrify UI is a React wrapper around <a class="alegrify-a" href="https://dejakob.com/alegrify-ui">Alegrify UI</a>.</p><p class="alegrify-p">As we believe human knowledge should be shared, we made some of our User Interface Elements available
for everyone who wants to use it.</p><p class="alegrify-p">This repo is a React implementation of the available elements.</p><h2 class="alegrify-h2">How to use</h2><p class="alegrify-p">First, install the dependency with yarn, npm or any alternative:</p><pre class="alegrify-space--large"><code class="language-bash">yarn add react-alegrify-ui
</code></pre><p class="alegrify-p">Next, add the CSS file into your project.
Most react projects support CSS imports (e.g. projects that are set up with create-react-app).
In those cases, this should do the trick:</p><pre class="alegrify-space--large"><code class="language-js">import '../node_modules/alegrify-ui/alegrify-ui.min.css';
</code></pre><p class="alegrify-p">In any other case manually include the <a class="alegrify-a" target="_blank" rel="noreferrer noopener" href="https://raw.githubusercontent.com/dejakob/alegrify-ui/master/alegrify-ui.min.css">alegrify-ui.min.css</a> file into your html file:</p><pre class="alegrify-space--large"><code class="language-html"><link rel="stylesheet" href="<PATH>/alegrify-ui.min.css" />
</code></pre><p class="alegrify-p">When these steps are fulfilled, you can easily import any component by doing</p><pre class="alegrify-space--large"><code class="language-js">import { Button } from 'react-alegrify-ui';
</code></pre><h2 class="alegrify-h2">Components</h2><ul class="alegrify-ul"><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/a.html">A (link)</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/avatar.html">Avatar</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/button.html">Button</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/card.html">Card</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/checkbox.html">Checkbox</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/dialog.html">Dialog</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/dl.html">Dl</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/drawer.html">Drawer</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/dropdown.html">Dropdown</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/footer.html">Footer</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/grid.html">Grid</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/input.html">Input</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/label.html">Label</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/notification.html">Notification</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/radio.html">Radio</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/range-input.html">Range Input</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/section.html">Section</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/stepper.html">Stepper</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/typography.html">Typography</a></li><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/ul.html">Ul</a></li></ul><h2 class="alegrify-h2">Helpers</h2><ul class="alegrify-ul"><li class="alegrify-ul__li"><a class="alegrify-a" href="https://dejakob.com/react-alegrify-ui/docs-build/spacing.html">Spacing</a></li></ul>
</section>
</main>
<script src="../dist/docs.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-jsx.min.js"></script>
</body>
</html>