https://github.com/vladotesanovic/angular2-quickstart-ngsemantic
- Angular 2 version: rc.5
- Semantic UI version: 2.2.1
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>
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'}
}
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 {}
git clone https://github.com/vladotesanovic/ngSemantic.git
cd ngSemantic
# install dependencies
npm install && npm run typings
# compile demo project
npm start
- 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
MIT License