Netgen UI

Styles and js for simple Netgen Admin UI plugins. Including:

• jsTree
• buttons with effect
• tabs
• tooltips
• resizable sidebar
• checkbox enabled/disabled buttons

Install

Install the Node dependency:

yarn add @netgen/admin-ui

or

npm install @netgen/admin-ui

Using CSS

Import styles to scss file:

@import "@netgen/admin-ui/scss/style";

You also need to configure sass-loader to understand the @netgen imports from node_modules. Update your sass-loader config by changing { loader: 'sass-loader' } to:

{
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
}

You can override scss variables for base font family and path to main logo image:

$baseFont: 'Roboto', Helvetica, Arial, sans-serif;
$mainLogoPath: '../images/ng-ui-logo.svg';

If you don't use scss, you can include already built css file from node_modules/@netgen/admin-ui/dist/css/style.css or minified style.min.css.

Using JS

To include the ES2015 modules and initialize the plugins for all of the UI plugins:

import { NgUiInit } from '@netgen/admin-ui';

NgUiInit();

If you can't use ES2015 modules and don't need to initialize plugin on specific event, you can include already built js file from node_modules/@netgen/admin-ui/dist/js/include/ngui.js which initializes all of the UI plugins on window load.

Tree

To include only tree plugin and initialize it:

import { NgUiTreeInit } from '@netgen/admin-ui';

NgUiTreeInit('ng-ui-tree-wrapper', { modal: true });

First parameter is the class name for tree element. Second parameters are options for the tree:

• modal - boolean - is the tree opened in modal window (default false)
• treeClassName - string - class name for div on which jstree is initialized (default 'ng-ui-tree')
• modalClassName - string - class name for modal div in which tree is opened (default 'ng-modal')

Tabs

To include only tabs plugin and initialize it:

import { NgUiTabsInit } from '@netgen/admin-ui';

NgUiTabsInit('ng-ui-tabs');

Function parameter is the class name for the tabs element (default 'ng-ui-tabs').

Html markup for the tabs should be:

<div class="ng-ui-tabs">
    <ul class="ng-ui-tab-controls">
        <li><a class="ng-ui-tab-control" data-target="tab1" href="#tab1">Tab1</a></li>
        <li><a class="ng-ui-tab-control" data-target="tab2" href="#tab2">Tab2</a></li>
        <li><a class="ng-ui-tab-control" data-target="tab3" href="#tab3">Tab3</a></li>
    </ul>
    <div class="ng-ui-tab" data-tab="#tab1">
        Tab1 content
    </div>
    <div class="ng-ui-tab" data-tab="#tab2">
        Tab2 content
    </div>
    <div class="ng-ui-tab" data-tab="#tab3">
        Tab3 content
    </div>
</div>

Last active tab is remembered in localStorage.

Buttons

To include only buttons plugin and initialize it:

import { NgUiBtnInit } from '@netgen/admin-ui';

NgUiTabsInit('ng-ui-btn');

Function parameter is the class name for the button elements (default 'ng-ui-btn').

Tooltips

To include only tooltip plugin and initialize it:

import { NgUiTooltipInit } from '@netgen/admin-ui';

NgUiTooltipInit('ng-ui-tt');

Function parameter is the class name for the tooltip elements (default 'ng-ui-tt').

Required markup for a tooltip is only css class (default: 'ng-ui-tt', can be overriden with initialization parameter), and title attribute for element you wish to have a tooltip. Title can have html markup, but all of the quotes inside of it must be single. Example:

<span class="ng-ui-tt" title="Lorem ipsum <a href='#'>dolor sit amet</a>, consectetur?">some text</span>

Sidebar resize

Plugin initializes with main init function (NgUiInit). Class name for resizable sidebar div should be 'ng-ui-sidebar-resizable'. Resizable sidebar connects with main logo and resizes it while resizing sidebar. Logo class name should be 'ng-ui-logo'.

Checkbox enable/disable buttons

Plugin initializes with main init function (NgUiInit). Use it to enable/disable buttons with checkbox inputs.

Checkbox inputs should have data-enable attribute data-enable="Target". Buttons should have data-enabler attribute data-enabler="Target".

If none of the checkboxes with the same data-enable attribute is checked, buttons with that data-disabler attribute are disabled. If you check any of the checkboxes, buttons are enabled.