Path
projects / org / se7enxweb / admin-ui-styles
Search!
Find the Exponential Software extensions you want
admin-ui-styles
| UNIX name | Owner | Status |
|---|---|---|
| admin-ui-styles | 7x | stable |
| Version | Compatible with |
|---|---|
| N/A | N/A |
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:
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:
some text
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.