NgShowcase

Lootstrap Angular Overview

Styled by Lootstrap

angular.json

{
  "styles": [
    "node_modules/@qrsln/lootstrap-angular/Styles/lootstrap.css"
// OR
    "node_modules/@qrsln/lootstrap/dist/css/lootstrap.css"
  ]
}

Ng - Accordion

Avatar
Params	Description
`[Collapsing]`	Decides if the single item will be open at once or not. In collapsing mode, toggling one would collapse others

***.module.ts

import {AccordionModule} from '@qrsln/lootstrap-angular/Libs/Accordion';

@NgModule({
  imports: [AccordionModule, /*...*/],
})

Ng - Avatar

Avatar
Params	Description
`[Img]`	Image url.
`[Alt]`	Alternative text for the avatar image, if the image cannot be displayed.
`[Letter]`	Can be used with letters (max 3).
`[BgColor]`	Color of avatar background.
`[Variant]`	Options: `Square, Rounded, Circle`.
`[Anchor]`	Options: `Top, Bottom, None`.
`[Online]`	Green badge color. Default value: `false`.

Avatar Group
Params	Description
`[ImgList]`	Images url.
`[Reversed]`	Default value: `false`.
`[More]`	Default value: `false`.

***.module.ts

import {AvatarModule} from '@qrsln/lootstrap-angular/Libs/Avatar';

@NgModule({
  imports: [AvatarModule, /*...*/],
})

Ng - Breadcrumb

Avatar
Params	Description
`[Letter]`	Letter chevron.
`[Chevron]`	Options: `'Regular' (default) 'Larger' 'Vertical'`.
`[Root]`	`Root:BreadcrumbItem;`.
`[Items]`	`Items:BreadcrumbItem[];`.
`[Autoload]`	Can automatically retrieve custom data from current route (`data['breadcrumb']`).
`Model`	export interface BreadcrumbItem { External: boolean; FaIcon: string; Href: string; Label: string; } `export interface BreadcrumbItem { External: boolean; FaIcon: string; Href: string; Label: string; }`

***.module.ts

import {BreadcrumbModule} from '@qrsln/lootstrap-angular/Libs/Breadcrumb';

@NgModule({
  imports: [BreadcrumbModule, /*...*/],
})

Ng - Card

Params	Description
`[Orientation]`	Options: `Vertical (default), Horizontal`.
`[Caret]`	Options: `'left' 'top' 'right' 'bottom' undefined`.

***.module.ts

import {CardModule} from '@qrsln/lootstrap-angular/Libs/Card';

@NgModule({
  imports: [CardModule, /*...*/],
})

Ng - Carousel

Params	Description
`[Images:CarouselItem[]]`	Images list.
`[Interval]`	Time in milliseconds before the next slide is shown. Default value: `6000`.
`[Captions]`	If `true`, captions will be visible. Default value: `true`.
`[NavigationArrows]`	If `true`, previous and next navigation arrows will be visible on the slide. Default value: `true`.
`[NavigationIndicators]`	If `true`, navigation indicators at the bottom of the slide will be visible. Default value: `true`.
`[Dummy]`	With dummy images for the test purpose, Default value: `false`.
`[PauseOnHover]`	If `true`, will pause slide switching when mouse cursor hovers the slide. Default value: `false`.
`Model`	export interface CarouselItem { Src: string; Alt: string; Caption: string; Description: string; } `export interface CarouselItem { Src: string; Alt: string; Caption: string; Description: string; }`

***.module.ts

import {CarouselModule} from '@qrsln/lootstrap-angular/Libs/Carousel';

@NgModule({
  imports: [CarouselModule, /*...*/],
})

Ng - Dialog

Component
Params	Description
`[Content]`	Dialog Title & InnerHtml.
`[Footer]`	Redirect Href.
`[Forced]`	Default value: `false`.

Service - Methods
Params	Description
`Redirect`	`Prompt (Content: DialogContent, Forced = false){...}`.
`Prompt`	`Redirect (Content: DialogContent, Href: string, Label: string, Forced = false){...}`.

***.module.ts

import {DialogModule} from '@qrsln/lootstrap-angular/Libs/Dialog';

@NgModule({
  imports: [DialogModule, /*...*/],
})

Need to assign ViewContainerRef first, for creating dynamic components through Service as below: constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { this.dialogService.ViewContainerRef = viewContainerRef; }

constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) {
  this.dialogService.ViewContainerRef = viewContainerRef;
}

Ng - Notify

Service Methods
Params	Description
`Notify`	Image url.
`Notify`	Root Method.
`Show`	Root; seperated.
`Iconic`	For using custom icon like FA Icons.
`Notify`	Image url.
`None`	Customized Theme Method.
`Success`	Customized Theme Method.
`Info`	Customized Theme Method.
`Error`	Customized Theme Method.
`Warning`	Customized Theme Method.

Service usage depends on Notify Component at your layout.

  <!--layout.component.html-->
  <Notify></Notify>

  <router-outlet></router-outlet>

***.module.ts

import {NotifyModule} from '@qrsln/lootstrap-angular/Libs/Notify';

@NgModule({
  imports: [NotifyModule, /*...*/],
})

Ng - Pagination

Params	Description
`[Items]`	Items that you want to paginate.
`[ItemPerPage]`	The number of items to display on each page.
`[CurrentPage]`	The current (active) page number.
`[MaxSize]`	Defines the maximum number of page links to display. Default is `6`.
`[Alignment]`	Options: `'Start' \| 'Center' \| 'End'`.
`[Sizing]`	Options: `'Regular' \| 'Small' \| 'Large'`.
`[Shape]`	Options: `'Regular' 'Circle'`.
`(PageChanged)`	`EventEmitter` Returns the current page.
`(PagedItems)`	`EventEmitter` Returns the current paged Items.

***.module.ts

import {PaginationModule} from '@qrsln/lootstrap-angular/Libs/Pagination';

@NgModule({
  imports: [PaginationModule, /*...*/],
})

Ng - Rating

Params	Description
`[Fraction]`	Allows to click half of unit of rate.
`[ReadOnly]`	Read Only :).
`[Shadow]`	Allow drop shadow to items.
`[BgColor]`	Custom Bg color.
`[Pattern]`	`'Customized' (default), 'Base'`.
`[Icons]`	Use with other icon libraries.
`[ShowValue]`	Show rating Value.
`[Rate]`	Current rating.
`(RateChanged)`	`Event Emitter` as `(RateChanged)="rateChanged($event)"`.

***.module.ts

import {RatingModule} from '@qrsln/lootstrap-angular/Libs/Rating';

@NgModule({
  imports: [RatingModule, /*...*/],
})

Ng - Spinner

Params	Description
`[Pattern]`	`Vortex, VortexSqr, Grow, Border`.
`[Overlay]`	Overlay effect.
`[Color]`	Css color.
`[ExpireIn]`	Automatically expires if set; `milliseconds`.
`[Adaptive]`	Uses active theme's accent color if its `true`.
`[Small]`	To make a smaller spinner that can quickly be used within other components.

***.module.ts

import {SpinnerModule} from '@qrsln/lootstrap-angular/Libs/Spinner';

@NgModule({
  imports: [SpinnerModule, /*...*/],
})

Need to assign ViewContainerRef first, for creating dynamic components through Service as below: constructor(private spinnerService: SpinnerService, private viewContainerRef: ViewContainerRef) { this.spinnerService.ViewContainerRef = viewContainerRef; }

constructor(private spinnerService: SpinnerService, private viewContainerRef: ViewContainerRef) {
  this.spinnerService.ViewContainerRef = viewContainerRef;
}

Ng - Table

Params	Description
`[test]`	test.

***.module.ts

import {TableModule} from '@qrsln/lootstrap-angular/Libs/Table';

@NgModule({
  imports: [TableModule, /*...*/],
})

Ng - Tabs

Tabs
Params	Description
`[Design]`	`Tab (default), Pill`.
`[ActiveTab]`	Default value: `Fist tab`.
`[Vertical]`	Default value: `false`.
`(OnChange)`	`Event Emitter`. Returns active `TabPane`'s `[Label]`.

TabPane
Params	Description
`[Label]`	Tab title.
`[Anim]`	`FadeIn, BounceIn, ZoomIn`.
`[Active]`	Default value: `false`.
`[Disabled]`	Default value: `false`.

***.module.ts

import {TabsModule} from '@qrsln/lootstrap-angular/Libs/Tabs';

@NgModule({
  imports: [TabsModule, /*...*/],
})

Ng - TimeAgo

TimeAgoDirective
Params	Description
`[Date]`	Date.
`[Locale]`	Language code.
`[Live]`	Dynamically change. Default value: `false`.

TimeAgoPipe
Params	Description
`[args[0]]`	`String` type as Locale value.
`[args[1]]`	`boolean` type as Live value.

***.module.ts

import {TimeAgoModule} from '@qrsln/lootstrap-angular/Libs/TimeAgo';

@NgModule({
  imports: [TimeAgoModule, /*...*/],
})

Ng - Timeline

Timeline
Params	Description
`[Anim]`	`'Shake' 'Rubber-band' 'Wobble' 'Jello' undefined`.
`[Layout]`	`'Side' 'Centered' 'Connected'`.

TimelineItem
Params	Description
`[Inverted]`	Default value: `false`.

***.module.ts

import {TimelineModule} from '@qrsln/lootstrap-angular/Libs/Timeline';

@NgModule({
  imports: [TimelineModule, /*...*/],
})

Ng - Timer

Params	Description
`[Date]`	Date.
`[ClassName]`	Css class.

***.module.ts

import {TimerModule} from '@qrsln/lootstrap-angular/Libs/Timer';

@NgModule({
  imports: [TimerModule, /*...*/],
})

Ng - TreeView

Properties

Params	Description
`[Mode]`	`Single, Multiple`.
`[Items]`	Tree View items.
`[Sort]`	Sort the items. Default value: `false`.
`[SelectedItems]`	`EventEmitter`, returns selected items.

***.module.ts

import {TreeViewModule} from '@qrsln/lootstrap-angular/Libs/TreeView';

@NgModule({
  imports: [TreeViewModule, /*...*/],
})