https://github.com/netgen/admin-ui-styles
NPM package providing base styles for building admin UI interfaces
https://github.com/netgen/admin-ui-styles
Last synced: about 1 year ago
JSON representation
NPM package providing base styles for building admin UI interfaces
- Host: GitHub
- URL: https://github.com/netgen/admin-ui-styles
- Owner: netgen
- Created: 2018-05-30T08:47:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-04T14:45:48.000Z (over 7 years ago)
- Last Synced: 2025-03-25T10:21:30.495Z (about 1 year ago)
- Language: CSS
- Size: 883 KB
- Stars: 5
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```scss
@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:
```js
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules']
}
}
```
You can override scss variables for base font family and path to main logo image:
```scss
$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:
```js
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:
```js
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:
```js
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:
```html
```
Last active tab is remembered in localStorage.
### Buttons
To include only buttons plugin and initialize it:
```js
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:
```js
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:
```html
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.