ngx-canaima

Angular 5+ Awesome UI Components

Table of contents

1. Getting Started
2. Installation instructions
3. Usage & Demo
4. API
5. Troubleshooting
6. Contributing
7. License

Getting Started

ngx-canaima contains all core (and not only) Bootstrap components powered by Angular and ngx-bootstrap. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.

Installation instructions

To install this library, run:

$ npm install ngx-canaima --save

You will need bootstrap styles (Bootstrap 3)

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

You will have to import the styles.scss from ngx-canaima/assets/stylesheet/styles.scss into your application main style.scss file

// styles.scss
@import 'mixins';
@import 'variables';
@import '~ngx-canaima/assets/stylesheet/styles.scss';
@import 'common';

If you have a variables file that overrides Bootstrap variables, put the ngx-canaima styles before it.

Usage and demo

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ngx-canaima --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxCanaimaModule } from 'ngx-canaima';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxCanaimaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<as-card
[title]="'I love bacon"
[subtitle]="Yes I do!"
[shadow]="1"
>
</as-card>

Demo comming soon!.

API

API Comming soon!.

Troubleshooting

So you are in trouble, where to get help:

• you can search and ask for help at StackOverflow

• if none of this helped please search and only then open new issue

Contribution

Are very welcome! And remember, contribution is not only PRs and code, but any help with docs or helping other developers to solve issues are very appreciated! Thanks in advance!

TodoList

• [X] Cards Components
• [X] Lists Components
• [X] Dynamic Forms Components
• [X] Buttons Directives
• [X] Toolbar Component
• [X] Header Component
• [X] Segments Component
• [X] Chip Component
• [X] Fab Button Component
• [X] Media Uploader
• [X] Avatar Uploader
• [X] Datatable Component
• [ ] Breadcrumbs Component

Credits

License

MIT © Alvaro Saburido