A padded box for your web application
npm install z-box[![Build]](https://travis-ci.org/z-kit/z-box) [![SemVer]](http://semver.org/) [![License]](LICENSE)
The z-kit component template, starter point to create z-kit compliant components. The package is intended to be used in a web page.
- z-box
- Table of contents
- Install
- Import as HTML/CSS component
- Import as Stateless Functional Component (SFC)
- How to use
- CSS component
- Stateless Functional Component
- License
The package is available to download through npm:
``bash`
npm install z-box --save
The package will be located inside the node_modules folder, you can import it into the HTML document as follows:
`html`
For bundlers that support CSS, like Webpack, you can use it like this:
`javascript`
require('z-box/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:
`jsx
// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;
// Passing the render function when importing
const ZBox = require('z-box')(React.createElement);
// Render it on page, using JSX here :)
render(
`
Just add the HTML structure and CSS classes to reproduce the UI component.
| Recommended HTML tags | Parent | Class | Description | Type |
| ------------------------------------------ | ------ | -------- | ------------------------------------------------- | ----- |
| div, nav, section, main, article | root | .z-box | Root container that will have the contents padded | Block |
#### Full working example:
`html`
Hello!
Render the HTML by using the SFC and passing props.
| Prop name | Expected Type | Description |
| ---------- | --------------------------------------- | ----------------------- |
| children | One or more HTMLElement or TextNode | The contents of the box |
#### Full example (JSX):
`jsx``
[Build]: https://img.shields.io/travis/z-kit/z-box.svg
[SemVer]: https://img.shields.io/:semver-%E2%9C%93-brightgreen.svg
[License]: https://img.shields.io/npm/l/z-box.svg