Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

GitHub version Dependency Status Build Status MIT licensed Support via PayPal

Angular2 & Semantic UI

Angular 2
Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

  • Angular 2
  • Semantic UI version: 2.2.2

Installation

npm install ng-semantic --save

Angular CLI configuration ( Webpack )

Install jQuery with NPM

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:

...

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

// 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: `
 <sm-segment class="raised">
    Hello
 </sm-segment>
 `
})
export class DemoComponent {}

Custom configuration

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

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

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

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

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

About

Angular 2 building blocks 📦 based on Semantic UI

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.