ngx-ui-tooling v0.0.62
#UI Tooling for Angular
Dependency
- @angular/common
- @angular/core
- bootstrap
- font-awesome-sass
- ngx-perfect-scrollbar
Compatibility
This tool was mainly created for angular electron application. However it was tested in browers like chrome and firefox and work as expected, but not yet confirmed for IE and other browsers. So make sure what your requirements are before using this module. We will look into browser compatibility and push new releases out as we develop on this tool.
Current Features
We have 3 Components available for now and will extend on this tooling UI in future. We will also like your feedback and suggestions to improve on this and give you the ultimate coding experience. Please contact me through freshtoolbox@gmail.com
- ngx-ui-tab
- ngx-ui-sidenav
- ngx-ui-footer-taskbar
- ngx-ui-split-container (to be added)
- ngx-ui-docpanel (to be added)
How To add Perfect Scrollbar
Click on the Link to see the implementation of perfect-scrollbar
Add to your module
import { NgxUiTabModule, NgxUiToolingModule, NgxUiFooterTaskbarModule, NgxUiSidenavModule } from 'ngx-ui-tooling';
UI Tab (ngx-ui-tab)
######HTML code How to implement.
<ngxui-tabs
#tabs
[Theme]="'dark'"
[TabText]="'Please click on the add button to the right to start a process'"
(TabAddEvent)="onTabAdded($event)"
(TabCloseEvent)="onTabClosed($event)">
<div #tabsContainer *ngFor="let item of tabArray; let i=index">
<ngxui-tab
[TabId]="item.TabId"
[Title]="item.Title"
[Closable]="item.Closable"
[Active]='item.Active'
[Loading]="item.Loading">
<ngxui-component-factory [id]="item.TabId" [componentData]="item.MyComponentData"></ngxui-component-factory>
</ngxui-tab>
</div >
</ngxui-tabs>
######Javascript How to implement. In your component of choice add the following code
import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import { TabComponent, ComponentData, TabsComponent } from 'ngx-ui-tooling';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
@ViewChild('tabs') tabs: TabsComponent;
tabArray: TabComponent[] = [];
constructor() {}
onTabAdded(event) {
/*You can add your process here to get your component injected to the container*/
/*This is all dynamic */
const tab = new TabComponent();
tab.Title = tile.Title;
tab.Active = true;
tab.Closable = false;
tab.MyComponentData = new ComponentData();
tab.MyComponentData.component = Your component to inject;
tab.MyComponentData.inputs = Your component input data ;
this.tabs.addTab(tab).then(
(tabs: QueryList<TabComponent>) => {
if (tabs.toArray().length !== this.tabArray.length) {
tabs.toArray().forEach(element => {
const t: TabComponent = this.tabArray.find((e: TabComponent) => e.TabId === element.TabId );
if (!t) {
this.tabArray.push(element);
}
});
}
setTimeout(() => {
this.tabs.layoutTabs();
}, 1);
},
(error) => {
console.log(error);
}
);
}
onTabClosed(tab: TabComponent){
const index = this.tabArray.findIndex((e: TabComponent) => e.TabId === tab.TabId );
this.tabArray.splice(index, 1);
}
}
UI Side Navigation (ngx-ui-sidenav)
######HTML code
In your component of choice add the following code.
<ngxui-sidenav (CloseEvent)="onCloseSideNav($event)" (DismissEvent)="onDismissSideNav($event)" #sidenav>
<a href="#" class="closebtn" (click)="btnCloseSideNav($event)">×</a>
<p style="color:white">This is a test nav</p>
<ngxui-sidenav-recent-activity>
<perfect-scrollbar>
<div class="category" href="#">Recent Activity</div>
<a *ngIf="RecentItems.length <= 0" href="#" (click)="$event.preventDefault();">
<span>No recent activity found</span>
</a>
<ng-container *ngFor="let recent of RecentItems">
<a href="#" (click)="onOpenRecentActivity(recent)">
<img src="" alt="access"><span>Access</span>
</a>
</ng-container>
</perfect-scrollbar>
</ngxui-sidenav-recent-activity>
<ngxui-sidenav-title-menu>
<perfect-scrollbar >
<div class="title-others">
Registered Programs
</div>
<div class="box-others">
<div class="box"
*ngFor="let tile of this.TileMenuItems | filterProduct:'IsRegistered':true"
(click)="onConfirmProcess(tile);">
<img [src]="tile?.ImgUrl" alt="">
<span>{{tile?.Title}}</span>
</div>
<div class="box">
<img src="" alt="">
<span>Word</span>
</div>
<div class="box">
<img src="" alt="">
<span>Excel</span>
</div>
<div class="box">
<img src="" alt="">
<span>Powerpoint</span>
</div>
<div class="box">
<img src="" alt="">
<span>Outlook</span>
</div>
<div class="box">
<img src="" alt="">
<span>Publisher</span>
</div>
<div class="box">
<img src="" alt="">
<span>OneNote</span>
</div>
</div>
</perfect-scrollbar>
</ngxui-sidenav-title-menu>
</ngxui-sidenav>
######Javascript How to implement. In your component of choice add the following.
import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import { SidenavComponent } from 'ngx-ui-tooling';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
@ViewChild('sidenav') sidenav: SidenavComponent;
RecentItems: RecentActivity[] = [];
constructor() {
this.sidenav.openNav();
}
btnCloseSideNav($event) {
this.sidenav.dismissNav({});
}
onDismissSideNav(tile: TileMenu) {
/*Do your own events here*/
}
onCloseSideNav(event) {
/*Do your own events here*/
}
onOpenRecentActivity(recent){
/*Recent Activity Events*/
}
}
UI Footer Taskbar (ngx-ui-footer-taskbar)
######HTML code In your component of choice add the following code.
<ngxui-footer-taskbar [ShowStartMenu]="true" (NotificationEvent)="eventAppNotification($event)">
<ngxui-taskbar-tabs-left>
<!--<a href="#search" id="search"></a>
<a href="#tabs" id="tabs-windows"></a>-->
</ngxui-taskbar-tabs-left>
<ngxui-taskbar-tabs-right>
</ngxui-taskbar-tabs-right>
<ngxui-status-bar-right [ShowNotification]="true">
<a> <i class="fa fa-bell"></i></a>
</ngxui-status-bar-right>
<ngxui-footer-taskpane #footertaskpane>
<ngxui-taskpane-user-menu>
<a class="push" href="#"><i class="fa fa-home" style="font-size: 2em"></i></a>
<a href="#"><i class="fa fa-user" style="font-size: 2em"></i></a>
<a href="#"><i class="fa fa-cog" style="font-size: 2em"></i></a>
</ngxui-taskpane-user-menu>
<ngxui-taskpane-recent-activity>
<div class="category" href="#">Recent Activity</div>
<perfect-scrollbar >
<a href="#"><img src="" alt="access"> <span>Access</span></a>
<a href="#"><img src="" alt="sublime"> <span>Sublime text3</span></a>
</perfect-scrollbar>
</ngxui-taskpane-recent-activity>
<ngxui-taskpane-tile-menu>
<perfect-scrollbar >
<div class="title-others">
Registered Programs
</div>
<div class="box-others">
<div class="box">
<img src="" alt="">
<span>Word</span>
</div>
<div class="box">
<img src="" alt="">
<span>Excel</span>
</div>
<div class="box">
<img src="" alt="">
<span>Powerpoint</span>
</div>
<div class="box">
<img src="" alt="">
<span>Outlook</span>
</div>
<div class="box">
<img src="" alt="">
<span>Publisher</span>
</div>
<div class="box">
<img src="" alt="">
<span>OneNote</span>
</div>
</div>
</perfect-scrollbar>
</ngxui-taskpane-tile-menu>
</ngxui-footer-taskpane>
</ngxui-footer-taskbar>
######Javascript How to implement. In your component of choice add the following.
import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import { FooterTaskpaneComponent } from 'ngx-ui-tooling';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
@ViewChild('footertaskpane') footertaskpane: FooterTaskpaneComponent;
constructor() {
}
ngOnInit() {
this.footertaskpane.closeTaskPane(event);
}
}
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago