@kizmann/nano-ui v0.8.34

Installation

npm install @kizmann/nano-ui [or] yarn add @kizmann/nano-ui

Dependencies

This package is dependent of @kizmann/pico-js as well as moment.

CDN Usage

<script src="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.js"></script>
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.css">
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/themes/light.css">

App.use(nano.Install);

Module Usage

import { Install } from "@kizmann/nano-ui";

App.use(Install);

@import "@kizmann/nano-ui/nano/index.scss";

Demo

Click me to see demo :cat:

ES5/6 Precompile

Incase you are not using the babel plugins (ES6) used in babel.config.js you will encounter errors while compiling. To prevent that its required to add an alias to your webpack.config.js.

webpack.config.js

module.exports = {
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.js'
        }
    }
}

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.js'
        }
    }
});

Visual Studio Code Autocomplete

When using VS Code with the ES5 fix from above you need to create or add to your existsing jsconfig.json this alias to enable correct autocomplete.

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@kizmann/nano-ui": ["node_modules/@kizmann/nano-ui/src/index.js"]
    }
  }
}

Input Elements

These are the html replacements for input, button, etc.

NButton Classic button

NInpt Classic input field

NTextarea Classic textarea

NInputNumber Number input with steps and formats

NSelect Single or multiselect field

NCascader Tree select box

NCheckbox Classic checkbox or grouped checkboxes

NRadio Classic radio groups

NSwitch On/off toggle like on iOS

NDatepicker Datepicker for single or daterange

NTimepicker Regular timepicker

NDatetimepicker (WIP) Description following soon

NTransfer Transfers items into a list, also supports drag and drop

List Elements

These are components which are used to disaplay items.

NDraglist Drag and drop list with tree support

NDraggrid Drag and drop grid with virtual scrolling

NTable Drag and drop table with tree support

NPaginator Description following soon

Overlay Elements

These components display information above your application layer.

NPopover Popover element (tooltip e.g.)

NModal Classic modal component

NConfirm Confirmation box

Notify Notification popup

Other Elements

These components display information above your application layer.

NForm Description following soon

NTabs Description following soon

NLoader Description following soon

NMap Description following soon

NScrollbar Description following soon

NVirtualscroller Description following soon