Angular 2 building blocks 📦 based on Semantic UI
Switch branches/tags
Nothing to show
Clone or download

README.md

GitHub version Dependency Status Build Status MIT licensed Support via PayPal

Angular2 & Semantic UI

Angular 2
Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

  • Angular 2
  • Semantic UI version: 2.2.2

Installation

npm install ng-semantic --save

Angular CLI configuration ( Webpack )

Install jQuery with NPM

npm install jquery --save

Download Official Semantic UI bundle ( .zip ) from Semantic-Org

Add semantic.min.css, semantic.min.js, jquery to the angular-cli.json as follows:

...

"apps": [{
  ... 
  "styles": [
      "styles.css",
      "../path/to/semantic.min.css" // 
  ],
  "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../path/to/semantic.min.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 {}

Custom configuration

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>

Support / Donations

If you’d like to support me developing this project you’re able to do so by donating on PayPal or if you have any special needs/ feature requests don’t hesitate to send me an email.

Support via PayPal

Angular 2 QuickStart with ngSemantic

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

Angular 2 CLI with ngSemantic

https://github.com/vladotesanovic/angular2-cli-webpack

Development

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

# install dependencies
npm install

# 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-shape
  • sm-tabs & sm-tab
  • sm-list
  • sm-item
  • smDirTooltip
  • smDeviceVisibility
  • smDirVisibility

Licence

MIT License