@wettomato/uebos
v0.0.9
Published
Library or set of tools for designing sites and web applications with HTML elements and components.
Downloads
8
Maintainers
wettomatoReadme
Wettomato Uebos
Wettomato Uebos (According to the Dictionary of the Spanish language uebos it is an archaism that means "Necessity" or "Necessary thing") is an open source library for web applications written in Angular Cli. The most common use of uebos is the implementation of SCSS resources with SASS to incorporate a small library of CSS components, which can be incorporated into every Angular project.
Installation
@wettomato/uebos is available as an npm package.
Installation with npm.
npm install @wettomato/uebosInstallation with yarn.
yarn add @wettomato/uebosUsage
Wettomato Uebos is still under construction, there are many things to solve and many components and elements to add. Everything is being planned and is being built with all the care and love that this project deserves, we hope to have a beta version available as soon as possible.
To implement the Uebos style sheets, the following configuration must be attached to the assets segment of the angular.json file:
Uebos resources and styles.
{
"input": "node_modules/@wettomato/uebos/assets",
"glob": "**/*",
"output": "assets/uebos"
}Uebos supports the resources, styles and icons of the following packages angular-feather, flag-icon-css, font-awesome and simple-line-icons in the file "package.json".
angular-feather Resources and Styles (A follow in development).
flag-icon-css Resources and Styles.
{
"input": "node_modules/flag-icon-css/flags",
"glob": "**/*",
"output": "assets/uebos/fonts/flag-icon-css/flags"
}font-awesome resources and styles.
{
"input": "node_modules/font-awesome/fonts",
"glob": "**/*",
"output": "assets/uebos/fonts/font-awesome/fonts"
}simple-line-icons Resources and Styles.
{
"input": "node_modules/simple-line-icons/fonts",
"glob": "**/*",
"output": "assets/uebos/fonts/simple-line-icons/fonts"
}The angular.json file should look like this:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"input": "projects/uebos/src/assets",
"glob": "**/*",
"output": "assets/uebos"
},
{
"input": "node_modules/flag-icon-css/flags",
"glob": "**/*",
"output": "assets/uebos/fonts/flag-icon-css/flags"
},
{
"input": "node_modules/font-awesome/fonts",
"glob": "**/*",
"output": "assets/uebos/fonts/font-awesome/fonts"
},
{
"input": "node_modules/simple-line-icons/fonts",
"glob": "**/*",
"output": "assets/uebos/fonts/simple-line-icons/fonts"
}
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
},
"development": {
"browserTarget": "my-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
},
"defaultProject": "my-app"
}Here is a quick example to get you started, it's all you need:
You must import the CardsModule, ComponentsModule, IconsModule, NavbarsModule, PageLayoutsModule, TemplatesModule, UebosModule module from @wettomato/uebos, in the module of your choice.
import { CardsModule, ComponentsModule, NavbarsModule, TemplatesModule, UebosModule } from '@wettomato/uebos';Example proposed with the AppModule module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CardsModule, ComponentsModule, NavbarsModule, TemplatesModule, UebosModule } from '@wettomato/uebos';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
UebosModule,
TemplatesModule,
NavbarsModule,
CardsModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Basic example proposed with the component file app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
public menuNavigation: Array<any> = [
{item: 'Getting started', icon: 'icon-home', content: [
{item: 'Introduction', href: 'https://getbootstrap.com/docs/5.0/getting-started/contents/', target: '_blank'},
{item: 'Download', href: 'https://getbootstrap.com/docs/5.0/getting-started/download/', target: '_blank'},
{item: 'Contents', href: 'https://getbootstrap.com/docs/5.0/getting-started/contents/', target: '_blank'},
]},
{item: 'Templates', icon: 'icon-screen-tablet', content: [
{item: 'Vertical', icon: 'icon-list', badge: '5', content: [
{item: 'Classic Menu'},
{item: 'Compact Menu'},
{item: 'Content Menu'},
{item: 'Overlay Menu'},
{item: 'Multi-level Menu'}
]},
{item: 'Horizontal', icon: 'icon-equalizer', badge: '3', content: [
{item: 'Classic'},
{item: 'Top Icon'},
{item: 'Cinco'}
]}
]},
{item: 'Separator', separator: true},
{item: 'Href', href: 'http://wettomato.org/', target: '_blank', icon: 'icon-paper-clip'},
{item: 'Router', routerLink: '/none', icon: 'icon-refresh spinner', badge: 'new'},
];
}Basic example proposed with the HTML file app.component.html.
<ubs-vertical-menu [projectName]="'Demo Uebos'" [footer]="true" [floatLeft]="true" [floatRight]="true" [menuNavigation]="menuNavigation">
<section id="loaders-css">
<div class="row">
<div class="col-12 mt-1">
<h4>Loaders</h4>
<p>Delightful and performance-focused pure <code><ubs-loader></ubs-loader></code> loading animations.</p>
<hr>
</div>
</div>
<div class="row match-height">
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Pulse</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-pulse'"</code> class for Ball Pulse Loader.</p>
<ubs-loader [type]="'ball-pulse'" [color]="'loader-primary'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Grid Ball Pulse</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-grid-pulse'"</code> class for Grid Ball Pulse Loader.</p>
<ubs-loader [type]="'ball-grid-pulse'" [color]="'loader-primary'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Clip Rotate</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-clip-rotate'"</code> class for Ball Clip Rotate Loader.</p>
<ubs-loader [type]="'ball-clip-rotate'" [color]="'loader-primary'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Square Spin</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'square-spin'"</code> class for Square Spin Loader.</p>
<ubs-loader [type]="'square-spin'" [color]="'loader-success'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Loading Spinner Option 15</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-clip-rotate-multiple'"</code> class for Multiple Ball Clip Rotate Loader.</p>
<ubs-loader [type]="'ball-clip-rotate-multiple'" [color]="'loader-success'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Pulse Rise</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-pulse-rise'"</code> class for Ball Pulse Rise Loader.</p>
<ubs-loader [type]="'ball-pulse-rise'" [color]="'loader-danger'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Rotate</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-rotate'"</code> class for Ball Rotate Loader.</p>
<ubs-loader [type]="'ball-rotate'" [color]="'loader-danger'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Cube Transition</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'cube-transition'"</code> class for Cube Transition Loader.</p>
<ubs-loader [type]="'cube-transition'" [color]="'loader-danger'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Zig Zag</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-zig-zag'"</code> class for Ball Zig Zag Loader.</p>
<ubs-loader [type]="'ball-zig-zag'" [color]="'loader-info'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Zig Zag Deflact</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-zig-zag-deflect'"</code> class for Ball Zig Zag Deflact Loader.</p>
<ubs-loader [type]="'ball-zig-zag-deflect'" [color]="'loader-info'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Trianle Path</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-triangle-path'"</code> class for Ball Trianle Path Loader.</p>
<ubs-loader [type]="'ball-triangle-path'" [color]="'loader-info'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Scale</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-scale'"</code> class for Ball Scale Loader.</p>
<ubs-loader [type]="'ball-scale'" [color]="'loader-warning'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Line Scale</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'line-scale'"</code> class for Ball Pulse Loader.</p>
<ubs-loader [type]="'line-scale'" [color]="'loader-warning'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Line Scale Party</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'line-scale-party'"</code> class for Line Scale Party Loader.</p>
<ubs-loader [type]="'line-scale-party'" [color]="'loader-warning'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Scale Multiple</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-scale-multiple'"</code> class for Ball Scale Multiple Loader.</p>
<ubs-loader [type]="'ball-scale-multiple'" [color]="'loader-purple'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Pulse Sync</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-pulse-sync'"</code> class for Ball Pulse Sync Loader.</p>
<ubs-loader [type]="'ball-pulse-sync'" [color]="'loader-purple'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Beat</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-beat'"</code> class for Ball Beat Loader.</p>
<ubs-loader [type]="'ball-beat'" [color]="'loader-purple'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Line Scale Pulse Out</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'line-scale-pulse-out'"</code> class for Line Scale Pulse Out Loader.</p>
<ubs-loader [type]="'line-scale-pulse-out'" [color]="'loader-deep-orange'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Line Scale Pulse Out Rapid</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'line-scale-pulse-out-rapid'"</code> class for Line Scale Pulse Out Rapid Loader.</p>
<ubs-loader [type]="'line-scale-pulse-out-rapid'" [color]="'loader-deep-orange'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Scale Ripple</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-scale-ripple'"</code> class for Ball Scale Ripple Loader.</p>
<ubs-loader [type]="'ball-scale-ripple'" [color]="'loader-deep-orange'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Spin Fade Loader</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-spin-fade-loader'"</code> class for Ball Spin Fade Loader Loader.</p>
<ubs-loader [type]="'ball-spin-fade-loader'" [color]="'loader-blue'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Line Spin Fade Loader</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'line-spin-fade-loader'"</code> class for Line Spin Fade Loader Loader.</p>
<ubs-loader [type]="'line-spin-fade-loader'" [color]="'loader-blue'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Tiangle Skew Spin</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'triangle-skew-spin'"</code> class for Tiangle Skew Spin Loader.</p>
<ubs-loader [type]="'triangle-skew-spin'" [color]="'loader-pink'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Semi Circle Spin</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'semi-circle-spin'"</code> class for Semi Circle Spin Loader.</p>
<ubs-loader [type]="'semi-circle-spin'" [color]="'loader-pink'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Grid Beat</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-grid-beat'"</code> class for Ball Grid Beat Loader.</p>
<ubs-loader [type]="'ball-grid-beat'" [color]="'loader-pink'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Ball Scale Random</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'ball-scale-random'"</code> class for Ball Scale Random Loader.</p>
<ubs-loader [type]="'ball-scale-random'" [color]="'loader-brown'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Double Bounce</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'double-bounce'"</code> class for Double Bounce Loader.</p>
<ubs-loader [type]="'double-bounce'" [color]="'loader-brown'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Chasing Dots</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'chasing-dots'"</code> class for Chasing Dots Loader.</p>
<ubs-loader [type]="'chasing-dots'" [color]="'loader-brown'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Fading Circle</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'fading-circle'"</code> class for Fading Circle Loader.</p>
<ubs-loader [type]="'fading-circle'" [color]="'loader-blue-grey'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Folding Cube</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'folding-cube'"</code> class for Folding Cube Loader.</p>
<ubs-loader [type]="'folding-cube'" [color]="'loader-blue-grey'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Turning Windows</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'turning-windows'"</code> class for Turning Windows Loader.</p>
<ubs-loader [type]="'turning-windows'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Turning Windows</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'turning-windows'"</code> class for Turning Windows Loader.</p>
<ubs-loader [type]="'turning-windows'" [turningWindowsSize]=24></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Turning Windows</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'turning-windows'"</code> class for Turning Windows Loader.</p>
<ubs-loader [type]="'turning-windows'" [turningWindowsSize]=48></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Spinner Border</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'spinner-border'"</code> class for Spinner Border Loader.</p>
<ubs-loader [type]="'spinner-border'" [color]="'text-primary'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Spinner Grow</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'spinner-grow'"</code> class for Spinner Grow Loader.</p>
<ubs-loader [type]="'spinner-grow'" [color]="'text-secondary'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
<div class="col-xl-3 col-xl-4 col-lg-6 col-md-12">
<ubs-card>
<ubs-card-header>
<ubs-card-title class="text-center">Pacman</ubs-card-title>
</ubs-card-header>
<ubs-card-body class="text-center">
<p>Using <code>[type]="'pacman'"</code> class for Pacman Loader.</p>
<ubs-loader [type]="'pacman'" [color]="'loader-orange'"></ubs-loader>
</ubs-card-body>
</ubs-card>
</div>
</div>
</section>
<ubs-card class="card">
<ubs-card-header>
<ubs-card-title>User Profile</ubs-card-title>
<ubs-heading-elements-toggle></ubs-heading-elements-toggle>
<ubs-heading-elements></ubs-heading-elements>
</ubs-card-header>
<ubs-card-content>
<ubs-card-body>
<ubs-card-title>Card title</ubs-card-title>
<ubs-card-subtitle>Card subtitle</ubs-card-subtitle>
<ubs-card-text>With supporting text below as a natural lead-in to additional content.</ubs-card-text>
<ubs-button [class]="'single'" [color]="'primary'">Go somewhere</ubs-button>
</ubs-card-body>
</ubs-card-content>
</ubs-card>
<ubs-card>
<ubs-card-header class="card-header card-head-inverse bg-warning">
<ubs-card-title class="card-title text-white">Warning Card Heading</ubs-card-title>
<ubs-heading-elements-toggle></ubs-heading-elements-toggle>
<ubs-heading-elements></ubs-heading-elements>
</ubs-card-header>
<ubs-card-content>
<ubs-card-body>
<ubs-card-text>Use <code>bg-warning</code> class with card-head for warning card heading color.</ubs-card-text>
</ubs-card-body>
</ubs-card-content>
</ubs-card>
<ubs-card class="card box-shadow-0 border-danger">
<ubs-card-header class="card-header card-head-inverse bg-danger">
<ubs-card-title class="card-title text-white">Danger Bordered Card</ubs-card-title>
<ubs-heading-elements-toggle class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></ubs-heading-elements-toggle>
<ubs-heading-elements class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</ubs-heading-elements>
</ubs-card-header>
<ubs-card-content class="card-content collapse show">
<ubs-card-body class="card-body">
<ubs-card-text class="card-text">Use <code>border-danger</code> class for danger border color.</ubs-card-text>
</ubs-card-body>
</ubs-card-content>
</ubs-card>
<ubs-button [color]="'secondary'">secondary</ubs-button>
<ubs-button [color]="'primary'">primary</ubs-button>
<ubs-button [color]="'success'">success</ubs-button>
<ubs-button [color]="'info'">info</ubs-button>
<ubs-button [color]="'warning'">warning</ubs-button>
<ubs-button [color]="'danger'">danger</ubs-button>
<ubs-button [color]="'light'">light</ubs-button>
<ubs-button [color]="'dark'">dark</ubs-button>
<ubs-button [color]="'default'">default</ubs-button>
<ubs-button [color]="'white'">white</ubs-button>
<ubs-button [color]="'magick'">magick</ubs-button>
<ubs-button [color]="'link'">link</ubs-button>
<ubs-button [color]="'adn'">adn</ubs-button>
<ubs-button [color]="'bitbucket'">bitbucket</ubs-button>
<ubs-button [color]="'dropbox'">dropbox</ubs-button>
<ubs-button [color]="'facebook'">facebook</ubs-button>
<ubs-button [color]="'flickr'">flickr</ubs-button>
<ubs-button [color]="'foursquare'">foursquare</ubs-button>
<ubs-button [color]="'github'">github</ubs-button>
<ubs-button [color]="'google'">google</ubs-button>
<ubs-button [color]="'instagram'">instagram</ubs-button>
<ubs-button [color]="'linkedin'">linkedin</ubs-button>
<ubs-button [color]="'microsoft'">microsoft</ubs-button>
<ubs-button [color]="'odnoklassniki'">odnoklassniki</ubs-button>
<ubs-button [color]="'openid'">openid</ubs-button>
<ubs-button [color]="'pinterest'">pinterest</ubs-button>
<ubs-button [color]="'reddit'">reddit</ubs-button>
<ubs-button [color]="'soundcloud'">soundcloud</ubs-button>
<ubs-button [color]="'tumblr'">tumblr</ubs-button>
<ubs-button [color]="'twitter'">twitter</ubs-button>
<ubs-button [color]="'vimeo'">vimeo</ubs-button>
<ubs-button [color]="'vk'">vk</ubs-button>
<ubs-button [color]="'yahoo'">yahoo</ubs-button>
<ubs-button [color]="'secondary'" [btn3d]="true">secondary</ubs-button>
<ubs-button [color]="'primary'" [btn3d]="true">primary</ubs-button>
<ubs-button [color]="'success'" [btn3d]="true">success</ubs-button>
<ubs-button [color]="'info'" [btn3d]="true">info</ubs-button>
<ubs-button [color]="'warning'" [btn3d]="true">warning</ubs-button>
<ubs-button [color]="'danger'" [btn3d]="true">danger</ubs-button>
<ubs-button [color]="'light'" [btn3d]="true">light</ubs-button>
<ubs-button [color]="'dark'" [btn3d]="true">dark</ubs-button>
<ubs-button [color]="'default'" [btn3d]="true">default</ubs-button>
<ubs-button [color]="'white'" [btn3d]="true">white</ubs-button>
<ubs-button [color]="'magick'" [btn3d]="true">magick</ubs-button>
<ubs-button [color]="'link'" [btn3d]="true">link</ubs-button>
<ubs-button [color]="'adn'" [btn3d]="true">adn</ubs-button>
<ubs-button [color]="'bitbucket'" [btn3d]="true">bitbucket</ubs-button>
<ubs-button [color]="'dropbox'" [btn3d]="true">dropbox</ubs-button>
<ubs-button [color]="'facebook'" [btn3d]="true">facebook</ubs-button>
<ubs-button [color]="'flickr'" [btn3d]="true">flickr</ubs-button>
<ubs-button [color]="'foursquare'" [btn3d]="true">foursquare</ubs-button>
<ubs-button [color]="'github'" [btn3d]="true">github</ubs-button>
<ubs-button [color]="'google'" [btn3d]="true">google</ubs-button>
<ubs-button [color]="'instagram'" [btn3d]="true">instagram</ubs-button>
<ubs-button [color]="'linkedin'" [btn3d]="true">linkedin</ubs-button>
<ubs-button [color]="'microsoft'" [btn3d]="true">microsoft</ubs-button>
<ubs-button [color]="'odnoklassniki'" [btn3d]="true">odnoklassniki</ubs-button>
<ubs-button [color]="'openid'" [btn3d]="true">openid</ubs-button>
<ubs-button [color]="'pinterest'" [btn3d]="true">pinterest</ubs-button>
<ubs-button [color]="'reddit'" [btn3d]="true">reddit</ubs-button>
<ubs-button [color]="'soundcloud'" [btn3d]="true">soundcloud</ubs-button>
<ubs-button [color]="'tumblr'" [btn3d]="true">tumblr</ubs-button>
<ubs-button [color]="'twitter'" [btn3d]="true">twitter</ubs-button>
<ubs-button [color]="'vimeo'" [btn3d]="true">vimeo</ubs-button>
<ubs-button [color]="'vk'" [btn3d]="true">vk</ubs-button>
<ubs-button [color]="'yahoo'" [btn3d]="true">yahoo</ubs-button>
</ubs-vertical-menu>Build Wettomato Uebos
This library was generated with Angular CLI version 12.0.5.
Code scaffolding
Run ng generate component component-name --project uebos to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project uebos.
Note: Don't forget to add
--project uebosor else it will be added to the default project in yourangular.jsonfile.
Build
Run ng build uebos to build the project. The build artifacts will be stored in the dist/ directory.
Publishing
After building your library with ng build uebos, go to the dist folder cd dist/uebos and run npm publish.
Running unit tests
Run ng test uebos to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.