angular-bootstrap-custom v0.0.3

Angular Bootstrap Custom

Angular modules custom using Bootstrap 5

Table of Contents

• Dependencies
• Installation
• Supported browsers
• Getting help
• Features
• Authors
• Keywords
• How to Use

Dependencies

The only dependencies are Angular, Bootstrap 5. The supported versions are:

Installation

for setting up a new project using Angular CLI .

Then run the following:

npm i angular-bootstrap-custom

Supported browsers

See Angular browser support and Bootstrap browser support

Getting help

your question answered on StackOverflow.

Features

• Tables
  • statements table
  • transactions table
  • entries table
  • form table
• Alerts
• Badges
• Card
• Off canvas
• Spinners
• Tabs
• Tags
• Toasts

Authors

@trilok3003

Keywords

• angular
• bootstrap
• components

• alert

• offcanvas

• table

• toast

• Tabs
• Tags
• Badges
• Card
• Spinners

How to Use

• Tabs

<tri-tabs [tabs]="tabs"></tri-tabs>
<tri-tabs-two [tabs]="tabs"></tri-tabs-two>

• Tags

 tags = ['Node js', 'Express', 'Mongodb', 'Angular']
<tri-tags [tags]="tags"></tri-tags>

• Card

ColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
<tri-card [color]="'info'">
</tri-card>

• Tables

 tabs = [
    {name: 'home', active: true},
    {name: 'about', active: false},
    {name: 'contact', active: false},
  ]
<tri-table-statements>
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Particular</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5]">
<td>20 may 2021</td>
<td>Credit</td>
<td>given</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</tri-table-statements>

<tri-table-transactions>
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Particular</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5]">
<td>20 may 2021</td>
<td>Credit</td>
<td>given</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</tri-table-transactions>

<tri-table-entries>
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Particular</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5]">
<td>20 may 2021</td>
<td>Credit</td>
<td>given</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</tri-table-entries>

<tri-table-form>
<thead>
<tr>
<th>Item</th>
<th>Rate</th>
<th>Qty</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5]">
<td>
<input class="form-control" placeholder="product">
</td>
<td>
<input class="form-control" placeholder="rate">
</td>
<td>
<input class="form-control" placeholder="qty">
</td>
<td>
<input class="form-control" placeholder="amount">
</td>
</tr>
</tbody>
</tri-table-form>

• Alerts

ColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
<tri-alerts [color]="'info'">
A simple dark alert—check it out!
</tri-alerts>

• Badges

ColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
<tri-badges [color]="'danger'">
A simple dark alert—check it out!
</tri-badges>

• Toasts

ColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
<tri-toasts [color]="'danger'">
A simple danger toast it out!
</tri-toasts>

• Spinners

ColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
<tri-spinners [color]="'info'"></tri-spinners>
<tri-spinners [color]="'info'" [type]="'spinner-grow'"></tri-spinners>

• Off Canvas

<tri-offcanvas [position]="'bottom'">
Hello
</tri-offcanvas>