Giter VIP home page Giter VIP logo

areebaaroosh / amexio.github.io Goto Github PK

View Code? Open in Web Editor NEW

This project forked from meta-magic/amexio.github.io

0.0 3.0 0.0 34.22 MB

Amexio (Angular MetaMagic EXtensions for Inputs & Outputs) is a rich set of Angular 6 (140+) components powered by HTML5 & CSS3 for Responsive Design and with 50+ Material Design Themes, UI Components, Charts, Gauges, Data Point Widgets, Dashboads. Amexio is completely Open Sourced and Free. It's based on Apache 2 License. You can use it in your production grade work today at no cost or no obligation.

Home Page: http://www.amexio.tech

License: Apache License 2.0

JavaScript 0.22% Shell 0.04% TypeScript 6.47% HTML 0.71% CSS 92.56%

amexio.github.io's Introduction


Amexio
Amexio Angular EXtensions v5.4.3

Amexio (Angular MetaMagic EXtensions for Inputs and Outputs) is a rich set of  140+ Angular (4/5/6) UI Components powered by HTML5 & CSS3 for Responsive Web Design & 50+ built-in Material Design Themes. Components includes Form components, charts, maps, dashboards, Tabs, Grids, Trees, Layouts etc. We added D3 Charts support with Amexio Drillable Charts option. We augmented the Amexio Layouts with more layout options and brought CSS3 Grid Layout to Amexio with Responsive Design Pattern.




Browsers support made by godban

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS Safari
Chrome for Android
Chrome for Android
IE 11, Edge last 5 versions last 5 versions last 5 versions last 3 versions last 4 versions last 3 versions last 3 versions

Table of Content

Features

  • Pure TypeScript: Amexio is a pure Typescript library with 0 Dependencies & Angular 4/5/6 Support.
  • 140+ High Grade Components: We make sure you're nothing short of while building your app.
  • Forms: Amexio API supports both Template Driven Forms and Reactive Forms.
  • Layouts: With v5.4 release More than half a dozen layout options are supported including CSS3 Grids.
  • Responsive Web Design: Out of the box Responsive Web Design with 50+ Material Design based Themes.
  • Charts, Dashboads, D3: Powerful Charting library including D3 Charts with Drillable capabilities.
  • Server Rending Support: Components support & optimized for server side rendering.
  • Highly Customizable Styling: Lot of customization can be done easily using the Amexio SCSS files.
  • Security & Quality: Every Amexio build goes thru Security Scanning using Sonar to ensure very High Quality Standards.
  • Modular Support: Load Only what you want, amexio is Modular.
  • FOSS: Amexio API is Free and Open Source Software based on Apache 2 License

Angular CLI - Installation

Overview

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications

Getting Started

To install the Angular CLI:

npm install -g @angular/cli

Generating and serving an Angular project via a development server Create and run a new project:

ng new my-project
cd my-project
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

For More on Angular CLI commands click on the link.

Amexio D3 Charts - Installation

To install this library, follow the steps given below:

$ cd your-angular-project
$ npm install amexio-chart-d3 --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component';

// To import D3-Chart :- 

import { AmexioChartD3Module } from 'amexio-chart-d3';

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

Amexio Angular Extension - Installation

To install this library, follow the steps given below:

$ cd your-angular-project
$ npm install amexio-ng-extensions@latest --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import { AppComponent } from './app.component';

// Import your library
import { AmexioWidgetModule,CommonDataService } from 'amexio-ng-extensions';

// To import Charts
import { AmexioChartsModule } from 'amexio-ng-extensions';

//To import Maps 
import { AmexioMapsModule } from 'amexio-ng-extensions';

// To import Dashboard
import { AmexioDashboardModule } from 'amexio-ng-extensions';


// To import Enterprise
import { AmexioEnterpriseModule } from 'amexio-ng-extensions';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AmexioWidgetModule,
    AmexioChartsModule,
    AmexioMapsModule,
    AmexioDashboardModule,
    AmexioEnterpriseModule
  ],
  providers: [CommonDataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Amexio Modules

Amexio Modules
AmexioWidgetModule
AmexioFormsModule
AmexioDataModule
AmexioLayoutModule
AmexioPaneModule
AmexioNavModule
AmexioMediaModule
AmexioMapsModule
AmexioChartsModule
AmexioDashBoardModule
AmexioEnterpriseModule

Amexio Themes (Amexio / Amexio Material)

To use the default theme import the ../node_modules/amexio-ng-extensions/styles/mda/at-md-blue.scss in your app styles.scss Or refer the below table for other themes provided.

Amexio Material Themes Amexio Themes
AT-MD-Gold-Amber AT-AM-Ocean-Blue
AT-MD-Army-Olive AT-AM-Tiger
AT-MD-Ash Stone Black AT-AM-Lime Green
AT-MD-Black AT-AM-Matrix
AT-MD-Blue AT-AM-Spicy-Apricot
AT-MD-Blue-Grey AT-AM-Byzantine-Crystal
AT-MD-Ginger-Bread AT-AM-Honey-Prussian
AT-MD-Cerise Magneta AT-AM-Persian-Laguna
AT-MD-Charcoal Russet AT-AM-Burgandy-Magenta
AT-MD-Fern-Lime AT-AM-Navy-Grape
AT-MD-Frenchrose-mulberry AT-AM-Matrix-Amber
AT-MD-Grape-Voliet AT-AM-Matrix-Cream
AT-MD-Hot-Pink-Fuchsia AT-AM-Matrix-Maya
AT-MD-Saphire AT-AM-Matrix-Ultra
AT-MD-Jungle-Mint AT-AM-Royal-Kelly
AT-MD-Maya-Light-Blue AT-AM-Royal-Pineapple
AT-MD-Mahogany Barny Red
AT-MD-Navy Egyptian
AT-MD-Raspberry Sangria
AT-MD-Red Maroon
AT-MD-Sacremento Jado
AT-MD-Yale Azure
At-MD-Tronbone Royal
AT-MD-Pineapple-Flaxen
AT-MD-Pumpkin-Fire
AT-MD-Mauve-Orchid
AT-MD-Honey-Mustard
AT-MD-Bruntor-Tangerine

Amexio Microsoft Visual Studio Code Extensions

This extension will help the developers of Visual Studio Code with quick code snippet for the Amexio Markup as well as Amexio TypeScript for the Angular Extensions.

  • Available for v3.x series
  • Plugin for v4.0 will be available in the first week of Feb 2018.

Usage

Select the Amexio Ui Component

Fill up the required Component Params

License

Copyright © MetaMagic Global Inc, 2017-18. Amexio Angular EXtensions. All rights reserved.

Licensed under the Apache 2.0 License. API Docs by CC By 4.0

Enjoy!

amexio.github.io's People

Contributors

pratikthecook avatar sagarthecook avatar kedar8 avatar ketan-gote avatar rashmithakkar avatar anaghak07 avatar manisha1205 avatar deepali-arvind avatar arafkarsh avatar ashwiniagre1 avatar gitter-badger avatar ankita202 avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.