https://github.com/vladotesanovic/ngSemantic

Angular 2 building blocks :package: based on Semantic UI
https://github.com/vladotesanovic/ngSemantic

Last synced: 2 months ago
JSON representation

Angular 2 building blocks :package: based on Semantic UI

• Host: GitHub
• URL: https://github.com/vladotesanovic/ngSemantic
• Owner: vladotesanovic
• License: mit
• Created: 2015-09-27T17:23:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-04-16T13:48:03.000Z (over 5 years ago)
• Last Synced: 2024-10-25T22:49:48.648Z (3 months ago)
• Language: TypeScript
• Homepage: https://ng-semantic.herokuapp.com/
• Size: 7.6 MB
• Stars: 973
• Watchers: 66
• Forks: 148
• Open Issues: 94
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-angular-components - ng-semantic - Angular 2 building blocks based on Semantic UI. (Uncategorized / Uncategorized)
• awesome-angular - ng-semantic - Angular 2 building blocks package based on Semantic UI. (Uncategorized / Uncategorized)
• awesome-angular-components - ng-semantic - Angular 2 building blocks based on Semantic UI. (Uncategorized / Uncategorized)

README

        
[![GitHub version](https://badge.fury.io/gh/vladotesanovic%2FngSemantic.png)](http://badge.fury.io/gh/vladotesanovic%2FngSemantic)

[![Dependency Status](https://david-dm.org/vladotesanovic/ngSemantic.svg)](https://david-dm.org/vladotesanovic/ngSemantic)

[![Build Status](https://travis-ci.org/vladotesanovic/ngSemantic.svg?branch=master)](https://travis-ci.org/vladotesanovic/ngSemantic)

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/hyperium/hyper/master/LICENSE)

[![Support via PayPal](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/ngsemantic)

# Angular2 & Semantic UI



  


  Angular2 - Semantic UI



## Live demo

ng-semantic.herokuapp.com



   
Angular 2 

   
Semantic UI version: 2.2.2



## Installation

```bash

npm install ng-semantic --save

```

## Angular CLI configuration ( Webpack )

Install `jQuery` with NPM

```bash

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:

```javascript

...

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

```javascript

// 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: `

 

    Hello

 

 `

})

export class DemoComponent {}

```

## Custom configuration

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

```html

```

## 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](https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg)](https://www.paypal.me/ngsemantic)

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

```bash

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