/ngSemantic

Angular 2 building blocks based on Semantic UI

Primary LanguageTypeScript

GitHub version Dependency Status Build Status MIT licensed

Angular2 & Semantic UI

Angular 2
Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

Important!

  • Angular 2 version: beta.14

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.1.8/semantic.min.css" />

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

<!-- Add this after Angular2 bundles -->
<script src="node_modules/ng-semantic/bundles/ng-semantic.js"></script>

Use

import {Component} from 'angular2/core';
import { SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES } from "ng-semantic";

@Component({
selector: 'demo-cmp',
directives: [SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES],
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 and build bundle files
npm run bundle

# compile demo project
npm run demo:build

# run demo project ( localhost:3000 )
npm run demo:serve

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-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