The z-kit component template, starter point to create z-kit compliant components. The package is intended to be used in a web page.
The package is available to download through npm:
npm install z-hello --saveThe package will be located inside the node_modules folder, you can import it into the HTML document as follows:
<link rel="stylesheet" href="node_modules/z-hello/dist/style.css">For bundlers that support CSS, like Webpack, you can use it like this:
require('z-hello/dist/style.css');The package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.
Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with css-loader.
Once you have chosen the renderer you can include the package in your project as follows:
// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;
// Passing the render function when importing
const ZHello = require('z-hello')(React.createElement);
// Render it on page, using JSX here :)
render(<ZHello>Hello!</ZHello>, document.body);You can also import it as a Web Component!
Just add the following line to your HTML file:
<link rel="import" href="node_modules/z-hello/dist/component.html">Then use it just like a regular HTML tag by the name of z-hello.
Just add the HTML structure and CSS classes to reproduce the UI component.
| Recommended HTML tags | Parent | Class | Description | Type |
|---|---|---|---|---|
div, section, main, article |
root |
.z-hello |
Root container | Block |
h1, h2, h3, h4, h5, h6 |
.z-hello |
.z-hello__title |
The title | Element |
<div class="z-hello">
<h1 class="z-hello__title">Hello!</h1>
</div>Render the HTML by using the SFC and passing props.
| Prop name | Expected Type | Description |
|---|---|---|
children |
TextNode |
The text to render |
<ZHello>Hello!</ZHello>Render the component just like any other HTML tag.
None.
<z-hello>Hello!</z-hello>![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent