Angular2 & Semantic UI

Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

Important!

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

Installaction

npm install ng-semantic --save

• Semantic UI installation will be triggered. Semantic UI must be installed in public folder ( dist folder must be public )
• In your index.html page load:
  • semantic.min.css
  • jQuery

Configure SystemJS loader:

System.config({
    defaultJSExtensions: true,
    paths: {
        // DON'T CHANGE KEY OF THIS PATH, CHANGE VALUE ONLY
        // IF YOU EXPOSE node_modules as public / static dir to your app, you can remove this line.
        'semantic-ui/dist/components/*': 'assets/semantic/dist/components/*.js',
        // 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': 'vendor/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

# skip semantic installation ( with default settings after ), 
# this is because we already have semantic in demo/assets/semantic

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

Licence

MIT