https://github.com/karnavpargi/ngx-bladex
A simplistic blade component for Angular with minimize/maximize and a close button.
https://github.com/karnavpargi/ngx-bladex
angular-sidebar blade blade-component ngx-bladex
Last synced: about 1 month ago
JSON representation
A simplistic blade component for Angular with minimize/maximize and a close button.
- Host: GitHub
- URL: https://github.com/karnavpargi/ngx-bladex
- Owner: karnavpargi
- Created: 2025-02-11T09:50:51.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-02-13T08:32:41.000Z (3 months ago)
- Last Synced: 2025-03-13T18:18:34.423Z (about 2 months ago)
- Topics: angular-sidebar, blade, blade-component, ngx-bladex
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-bladex
- Size: 3.68 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-bladex - A simplistic blade component for Angular with minimize/maximize and a close button. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-bladex - A simplistic blade component for Angular with minimize/maximize and a close button. (Table of contents / Third Party Components)
README
# NgxBlade2
[](https://travis-ci.com/karnavpargi/ngx-bladex)
[](https://www.npmjs.com/package/ngx-bladex)
[](https://www.npmjs.com/package/ngx-bladex)
A simplistic blade component for Angular with minimize/maximize and a close button.
## [Forked from ngx-blade](https://www.npmjs.com/package/ngx-blade)
## [Stackblitz Demo](https://stackblitz.com/edit/angular-ngx-blade)
## Compatibility
| ngx-bladex | Angular |
| ---------- | ------- |
| 18.0.0 | 18.x.x |
| 17.1.0 | 17.x.x Standalone |
| 17.0.0 | 17.x.x |
| 16.1.0 | 16.x.x Standalone |
| 16.0.0 | 16.x.x |
| 15.0.0 | 15.x.x |
| 14.0.0 | 14.x.x |
| 13.0.0 | 13.x.x |
| 12.0.0 | 12.x.x |
| 11.0.0 | 11.x.x |
| 10.0.0 | 10.x.x |
| 9.0.0 | 9.x.x |
## Installation
**Step 1**: Install NPM package
```bash
npm i ngx-bladex --save
```
**Step 2**: Import `NgxBladeModule` into in your module
##### Skip this if you are using standalone components
```typescript
import { NgxBladeModule } from 'ngx-blade';
@NgModule({
//..
imports: [ NgxBladeModule, .. ]
})
```
**Step 2.1**: To use standalone component Import `NgxBladeComponent` into in your component
##### Skip this if you are using Module approach
```typescript
import { NgxBladeComponent } from 'ngx-blade';
@Component({
//..
imports: [ NgxBladeComponent, .. ]
})
```
---
### `NgxBladeComponent`
#### Selector
```html
```
#### Inputs
- `width: number` - Width of the blade in percentage relative to the browser window.
- `config: BladeConfig` - Blade configuration properties. See [BladeConfig](#BladeConfig)
#### Outputs
- `onClose` - Emitted when close button is clicked. if `closeButton` is set as `false`, this event will never be emitted.
### `BladeConfig`
contains the following properties
```typescript
export interface BladeConfig {
closeButton: boolean; // default: true
maximizeButton: boolean; // default: true
isModal: boolean; // default: false
}
```
- `closeButton: boolean` - specify whether blade should contain a close button.
- `maximizeButton: boolean` - specify whether blade should contain the minimize/maxime button.
- `isModal: boolean` - specify if the blade should behave similar a modal dialog.
If a config is not provided as input, the default values will be used.
### Directives
The following directives should be used within the `` element.
- `ngxBladeHeader` - Blade Header element
- `ngxBladeBody` - Blade body element
- `ngxBladeFooter` - Blade footer element
## Sample Usage
```html
Blade title
Lorem Ipsum
Close blade
Blade Footer
```
---
## Theme customisation
Since v0.3.0, ngx-blade supports theme customisation using SCSS variables.
The following SCSS variables can be customised
```SCSS
// blade border
$ngxBladeBorderColor
// blade header
$ngxBladeHeaderBackground
$ngxBladeHeaderTextColor
// blade body
$ngxBladeBodyBackground
$ngxBladeBodyTextColor
// blade header action buttons (Minimize/Maximize, Close)
$ngxBladeActionButtonBackground
$ngxBladeCloseButtonHoverBackground
// blade footer
$ngxBladeFooterBackground
$ngxBladeFooterTextColor
```
## [Theme Customisation Demo](https://stackblitz.com/edit/angular-ngx-blade-theme-customization?file=src/styles.scss)