npm package: @qrsln/loot-box
Description: Custom components / services / directives for angular => // ...
Author: Qrsln
Latest version: 22.3.24-beta.0

## LootBox

[![Support](https://img.shields.io/badge/Patreon-white?style=for-the-badge)](https://www.patreon.com/qrsln)
[![npm](https://img.shields.io/npm/v/@qrsln/loot-box?style=for-the-badge)](https://www.npmjs.com/package/@qrsln/loot-box)
[![npm](https://img.shields.io/npm/dm/@qrsln/loot-box?style=for-the-badge)](https://npmcharts.com/compare/@qrsln/loot-box?minimal=true)

> For Angular  
> 
> This library will be deprecated soon! Please switch to this: [LootstrapNg](https://www.npmjs.com/package/@qrsln/lootstrap-angular)

````shell
npm install @qrsln/lootstrap-angular
````

[![Demo](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox)
[![Readme](https://img.shields.io/badge/ReadMe-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox)

## Quick start

- Install with [npm](https://www.npmjs.com/): `npm install @qrsln/loot-box`
- Install with [yarn](https://yarnpkg.com/): `yarn add @qrsln/loot-box`

## Styles

Powered by [LootStrap](https://github.com/krsln/LootStrap)

angular.json

````json
{
  "styles": [
    "node_modules/@qrsln/loot-box/Styles/LootStrap.css"
  ]
}
````

## Showcase

- LootBox
  - [Breadcrumb](#breadcrumb)
  - [Carousel](#carousel)
  - [Dialog](#dialog)
  - [Notify](#notify)
  - [Pagination](#pagination)
  - [Rating](#rating)
  - [Spinner](#spinner)
  - [Timeline](#timeline)
  - [Timer](#timer)
  - [TreeView](#treeview)

### Breadcrumb

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Breadcrumb)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Breadcrumb/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Breadcrumb/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Breadcrumb_2022-01-27.png "Breadcrumb")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Carousel

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Carousel)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Carousel/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Carousel/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Carousel_2022-01-27.png "Carousel")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Dialog

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Dialog)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Dialog/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Dialog/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Dialog_2022-01-27.png "Dialog")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Notify

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Notify)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Notify/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Notify/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Notify_2022-02-06.png "Notify")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Pagination

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Pagination)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Pagination/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Pagination/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Pagination_2022-01-27.png "Pagination")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Rating

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Rating)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Rating/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Rating/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Rating_Star_2022-01-27.png "Default & Heart")
![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Rating_Heart_2022-01-27.png "Default & Heart")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Spinner

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Spinner)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Spinner/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Spinner/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Spinner_Vortex_2022-01-27.png "Spinner")
![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Spinner_Grow_Border_2022-01-27.png "Spinner")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Timeline

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Timeline)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Timeline/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Timeline/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Timeline_Default_2022-01-27.png "Default")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### Timer

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/Timer)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Timer/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/Timer/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Timer_TimeAgo_2022-01-27.png "TimeAgo")  
![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/Timer_Countdown_Svg-new_2022-01-27.png "Countdown svg")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*

### TreeView

[![](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/LootBox/TreeView)
[![](https://img.shields.io/badge/readme-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/TreeView/readme.md)
[![](https://img.shields.io/badge/usage-orange?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/LootBox/Libs/TreeView/usage.md)

![](https://github.com/krsln/Showcase/raw/master/Docs/Images/LootBox/TreeView_2022-01-29.png "TimeAgo")

*[![](https://img.shields.io/badge/Top_⬆-blue?style=for-the-badge)](#showcase)*