@bnuby/ng-bnuby NPM

NgBnuby Library

Installation

npm install ng-bnuby --save

Usage

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'
        },
      ],
    },
  ]
 ]

tslib

@infinitebrahmanuniverse/nolb-_bn @everything-registry/sub-chunk-135 @zalastax/nolb-_bn

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago