ns

ng-semantic

Angular 2 building blocks 📦 based on Semantic UI

Showing:

Popularity

Downloads/wk

91

GitHub Stars

1K

Maintenance

Last Commit

5yrs ago

Contributors

21

Package

Dependencies

0

Size (min+gzip)

6.3KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial