@cardboard-box/ngx-box
v0.0.9
Published
A collection of useful directives, components and services for angular
Downloads
276
Maintainers
cardboardReadme
@cardboard-box/ngx-box
A collection of useful directives, components and services for angular
Install
You can install this package via NPM (or your favourite npm compatible installer)
npm install @cardboard-box/ngx-box
Add the two modules into your project:
import { NgModule } from '@angular/core';
import { MagicCircleModule, NgxBoxModule } from '@cardboard-box/ngx-box';
@NgModule({
declarations: [
...
],
imports: [
...
NgxBoxModule, //This is for all default components and directives
MagicCircleModule //This is JUST for the magic-circle components
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Usage - Containers
There is a default container that handles things like loading circles, error states, and content states. This can be useful for handling different component states, scrolling components, and standardization of error messages.
You can use it like so:
<box-container
[loading]="true"
loading-text="This text is shown on the loading circle"
error="Some error has occurred"
handle-scroll
>
<!--Your component content-->
</box-container>loading- Whether or not the component is in a loading state. (true / false)loading-text- The text to show on the loading circle (string / undefined)error- This is an error message to show if in an error state. If undefined, the component isn't in an error state (string / undefined)handle-scroll- Whether or not to handle scrolling within the content, otherwise it hides any overflow.
You need to ensure that the parent element of the component has position of relative, absolute, or fixed.
Usage - Icons
A way of handling google material icons without needing to include the material libraries. You will need to include the material icons CDN into your index.html for them to showup. You can use this CDN reference:
<head>
...
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kolker+Brush&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>You can use it like so:
<box-icon
font-size="24px"
[unsize]="false"
[fill]="false"
[spin]
>
warning
</box-icon>font-size- The size of the font to use for the icon. (string / undefined)unsize- Whether or not to remove explicit sizing and use theinheritoption for most propertiesfill- Whether or not to fill the icon in. This might not work for all icons. (boolean / undefined)spin- Whether or not to have the icon spin. (boolean / undefined)