joltup / ngSemantic

Angular 2 building blocks based on Semantic UI

Angular2 & Semantic UI

Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

Important!

• Angular 2 version: beta.13
• There is no bundled version yet.

Installation

npm install ng-semantic --save

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

<link rel="stylesheet" type="text/css" href="path/to/semantic.min.css">

<script src="path/to/jquery-2.1.4.min.js"></script>
<script src="path/to/semantic.min.js"></script>

Configure SystemJS loader:

System.config({
    defaultJSExtensions: true,
    paths: {
        // REQUIRED BY ANGULAR 2 ( CHANGE PATH )
        'rxjs/operator/*' : 'vendor/rxjs/operator/*.js',
    },
    map: {
        // IF YOU ARE NOT ABLE TO LOAD FROM node_modules
        // you must copy ng-semantic from /node_modules/ng-semantic 
        // ( files: semantic.js, semantic.d.ts and folder: ng-semantic )
        // and set path to it
        'ng-semantic/semantic': 'path/to/ng-semantic/semantic.js'
    },
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});

Development

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

# install dependencies
npm install

# build local files
npm run build

# local development server
npm run demo

Components

• 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-textarea
• sm-form
• sm-progress
• sm-card
• sm-tabs & sm-tab
• sm-list
• sm-item
• sm-dir-tooltip
• sm-dir-popup
• sm-dir-sidebar
• sm-dir-dimmer
• sm-dir-modal

Licence

MIT License