sirajc / ngSemantic

Angular 2 building blocks based on Semantic UI

Angular2 & Semantic UI

Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

Angular 2 QuickStart ( rc.5 ) with ngSemantic

https://github.com/vladotesanovic/angular2-quickstart-ngsemantic

Important!

• Angular 2 version: rc.5
• Semantic UI version: 2.2.1

Installation

npm install ng-semantic --save

Semantic UI ( minified versions of css and js ) must be loaded in index.html

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>

Angular CLI configuration

First add ng-semantic to the vendorNPMFiles array in angular-cli-build.js as follows:

vendorNPMFiles: [
  // other packages here
  'ng-semantic/**/*',
]

Then configure it in src/system-config.ts as follows:

/** Map relative paths to URLS. */
const map: any = {
  'ng-semantic': 'vendor/ng-semantic'
};

/** User packages configuration. */
const packages: any = {
  'ng-semantic': {main: 'ng-semantic.js', defaultExtension: 'js'}
}

Use

Then you can use in a component as follows:

// Module
import { NgModule } from "@angular/core";
import { NgSemanticModule } from "ng-semantic";

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

// Component
import {Component} from '@angular/core';

@Component({
selector: 'demo-cmp',
template: `
 <sm-segment class="raised">
    Hello
 </sm-segment>
 `
})
export class DemoComponent {}

Development

git clone https://github.com/vladotesanovic/ngSemantic.git
cd ngSemantic

# install dependencies
npm install && npm run typings

# compile demo project
npm start

Components

• sm-accordion
• sm-button
• sm-loader
• sm-header
• sm-message
• sm-popup
• sm-segment
• sm-modal
• sm-sidebar
• sm-dimmer
• sm-flag
• sm-input
• sm-checkbox
• sm-rating
• sm-dropdown
• sm-select
• sm-search
• sm-textarea
• sm-progress
• sm-card
• sm-tabs & sm-tab
• sm-list
• sm-item
• smDirTooltip
• smDeviceVisibility
• smDirVisibility

Licence

MIT License