@minna-ui/code-view
NOTE: This package is unfinished.
TODO: Write note about
@minna-ui/css
interplay/dependency.TODO: Example image.
TODO: Add link to demo and documentation page.
Usage
Standalone
The easiest way to use the component is to add the CDN hosted version directly in your HTML.TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.
- Add the CSS and JS to your document, inside the
<head></head>
:
<!-- prettier-ignore -->
```html
<link href="https://cdn.jsdelivr.net/npm/@minna-ui/code-view/dist/index.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@minna-ui/code-view"></script>
```
Or use a specific version:
<!-- prettier-ignore -->
```html
<link href="https://cdn.jsdelivr.net/npm/@minna-ui/code-view@0.0.0/dist/index.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@minna-ui@0.0.0/code-view"></script>
```
- Add an element where you want the component to show in your document
<body></body>
:
```html
<div id="minna-code-view"></div>
```
- Initialise the component:
<!-- eslint-disable no-new -->
```html
<script>
new MinnaCodeView({
target: document.querySelector('#minna-code-view'),
data: {},
});
</script>
```
Svelte projects
Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.- Install the package:
```sh
yarn add @minna-ui/code-view
```
- Add to your Svelte component:
`MySvelteComponent.svelte`:
```html
<MinnaCodeView />
<script>
import MinnaCodeView from '@minna-ui/code-view';
export default {
components: {
MinnaCodeView,
},
};
</script>
```
Other JavaScript projects
This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.- Install the package:
```sh
yarn add @minna-ui/code-view
```
- Add to your files:
`my-example.html`:
```html
<div id="minna-code-view"></div>
```
`my-example.js`:
<!-- eslint-disable no-new -->
```js
import MinnaCodeView from '@minna-ui/code-view';
new MinnaCodeView({
data: {},
target: document.querySelector('#minna-code-view'),
});
```
Licence
@minna-ui/code-view
is part of Minna UI
, an Apache-2.0 licensed open source project. See LICENCE.© 2019 We Are Genki