z-box v1.0.1
z-box
The z-kit component template, starter point to create z-kit compliant components. The package is intended to be used in a web page.
Table of contents
Install
The package is available to download through npm:
npm install z-box --save
Import as HTML/CSS component
The simple case
The 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-box/dist/style.css">
When bundling an web app
For bundlers that support CSS, like Webpack, you can use it like this:
require('z-box/dist/style.css');
Import as a Stateless Functional Component (SFC)
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 ZBox = require('z-box')(React.createElement);
// Render it on page, using JSX here :)
render(<ZBox>Content to render inside the box</ZBox>, document.body);
How to use
CSS component
Just add the HTML structure and CSS classes to reproduce the UI component.
Class hierarchy
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:
<div class="z-box">
<h1>Hello!</h1>
</div>
Stateless Functional Component
Render the HTML by using the SFC and passing props.
Supported Props
Prop name | Expected Type | Description |
---|---|---|
children | One or more HTMLElement or TextNode | The contents of the box |
Full example (JSX):
<ZBox>Hello!</ZBox>