@bnuby/ng-bnuby
v0.0.11
Published
## Installation ``` npm install ng-bnuby --save ```
Readme
NgBnuby Library
Installation
npm install ng-bnuby --saveUsage
step 1: Import NgBnubyModule into your app.module.ts
@NgModule({
imports: [
NgBnubyModule
]
})step 2:
You are Well Done!.
Now you can Add your favorite Component. (prefix with: ng-bnuby)
<body>
<ng-bnuby-datatable></ng-bnuby-datatable>
<ng-bnuby-image-upload></ng-bnuby-image-upload>
</body>Components List
1. Datatable
2. Image Upload
3. Multi Select
4. Side Bar
Components
1. Datatable Component
Dom
example.component.html
<ng-bnuby-datatable
[table]="table"
[headers]="headers"
[isLoading]="isLoading"
[itemSet]="itemSet"
></ng-bnuby-datatable>typescript
example.component.ts
Datatable main config
table: Datatable = {
style: {
'background-color': 'white'
}
};Define Header
headers: DatatableHeaders = [
{
title: 'Name',
key: 'h1'
},
{
title: 'Test2',
key: 'h2'
},
{
title: 'Tools',
key: 'tools'
}
];Define thead style
theadStyle: { [klass: string]: any } = {
'border-bottom': '1px solid gray'
};Define th style
thStyle: { [klass: string]: any } = {
padding: '10px 10px'
};Define loading text
loadingText: string = 'Data Loading';Define no Data text
noDataText: string = 'No Data';Define Table Item
itemSet: DatatableRows = [
{
_item: {},
h1: {
title: 'Hello World'
},
h2: {
title: 'Temporary 2'
},
tools: {
buttons: [
{
html: '<i class=\'fa fa-edit\'/i>',
callback: item => {
console.log(item);
}
},
{
html: '<i class=\'fa fa-trash\'/i>',
callback: item => {
console.log(item);
}
},
{
html: '<i class=\'fa fa-info\'/i>',
callback: item => {
console.log(item);
}
}
]
}
}
]Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| table | Use to define datatable, ex: title, style, class | Datatable | { style: { 'background-color': 'white' } }; |
| theadStyle | Use to define thead Style | CSSStyleDeclaration | { 'border-bottom': '1px solid gray' }|
| thStyle | Use to define th Style | CSSStyleDeclaration | { padding: '10px 10px' }|
| tdStyle | Use to define td Style | CSSStyleDeclaration | { padding: '5px 10px', 'border-bottom': '1px solid gray' } |
| * headers | Use to define datatable header | DatatableHeaders | { title: 'Name', key: 'h1' } |
| loadingText | Use to define loading text | string | Data Loading |
| noDataText | Use to define no data text | string | No Data |
| * itemSet | Use to define Table Data | DatatableRows | { ... } |
| isLoading | Use to control loading text | boolean | false |
2. Image Upload Component
Use ng-bnuby-image-upload tag selector
<ng-bnuby-image-upload></ng-bnuby-image-upload>Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| title | Given a title for the image upload | string | Image Upload |
| simple | If false Use the title attr and size attr | boolean | false|
| size | Use to define image upload size | sm, md, lg, fluid | md |
| uploadURL (Require) | The url that file upload. | string | '' |
| uploadedCallback | Use to receive the request callback and return a string for form control value. If status true, mean upload succses, otherwise mean fail. | Funtion | (status: boolean, res: any) => string | null |
| zIndex | Use to change content (image) z-index | number | 0|
3. Multi Select Component
Use ng-bnuby-multi-select multi selector
<ng-bnuby-multi-select></ng-bnuby-multi-select>Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| title | Given a title for the image upload | string | Image Upload |
| simple | If false Use the title attr and size attr | boolean | false|
| options | Use to define the options | ngBnubyOptions | [ { title: 'example', value: 'example', } ]|
| placeholder | Use to define placeholder | string | example |
4. Side Bar Component
Use ng-bnuby-side-bar selector
<ng-bnuby-side-bar></ng-bnuby-side-bar>Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| sideBarItems | Use SideBarItems to define the sidebar | SideBarItems | Below Example 1 |
Example 1: Basic Usage
sideBarItems: SideBarItems = [
[
{
title: 'Home',
icon: 'fa-home',
path: '/home'
},
{
title: 'User',
icon: 'fa-user',
children: [
{
title: 'Management',
icon: 'fa-text',
path: '/user/user-mgt'
},
{
title: 'Setting',
icon: 'fa-text',
path: '/user/setting'
},
],
},
]
]