ng2-semantic-ui

Semantic UI Angular 2 Integrations, written in pure AngularJS - no JQuery required.

Demo & Usage

ng2-semantic-ui

Installation

To install this library, run:

$ npm install ng2-semantic-ui --save

Add a reference to your index.html file: (also ensure you have a reference to the Semantic UI CSS file)

<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>

Start using the directives:

import {DIRECTIVES} from `ng2-semantic-ui/ng2-semantic-ui';

Components

The current list of available components with links to their docs is below:

• Accordion
• Checkbox
• Collapse
• Dimmer
• Dropdown
• Message
• Progress
• Rating
• Search
• Tab

Quick start (from scratch)

Clone the angular2-quickstart repository, and set everything up.

Add the following lines to your index.html:

<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">

Update your app.component.ts to be the following:

import {Component} from 'angular2/core';
import {CHECKBOX_DIRECTIVES} from 'ng2-semantic-ui/ng2-semantic-ui';

@Component({
  selector: 'my-app',
  directives: [CHECKBOX_DIRECTIVES],
  template: `
<sui-checkbox>Checkbox example</sui-checkbox>
`
})
export class AppComponent {}

And you're good to go!

Development

To generate all library *.js, *.js.map and *.d.ts files:

$ npm run tsc

To run the demo app:

$ npm run demo

To compile the demo app without running it:

$ npm run tsc-demo
# use tsc-demo:w to watch for changes

License

MIT © Edward Carroll