1.1.13 • Published 9 years ago

ng-semantic v1.1.13

Weekly downloads
209
License
MIT
Repository
github
Last release
9 years ago

GitHub version Dependency Status Build Status MIT licensed Support via PayPal

Angular2 & Semantic UI

Live demo

ng-semantic.herokuapp.com

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

1.1.13

9 years ago

1.1.12

9 years ago

1.1.11

9 years ago

1.1.10

9 years ago

1.1.9

9 years ago

1.1.8

9 years ago

1.1.7

9 years ago

1.1.6

9 years ago

1.1.5

9 years ago

1.1.4

9 years ago

1.1.3

9 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.0.37

9 years ago

1.0.36

9 years ago

1.0.35

9 years ago

1.0.34

9 years ago

1.0.33

9 years ago

1.0.32

9 years ago

1.0.31

9 years ago

1.0.30

9 years ago

1.0.29

9 years ago

1.0.28

9 years ago

1.0.27

9 years ago

1.0.26

9 years ago

1.0.25

9 years ago

1.0.24

9 years ago

1.0.23

9 years ago

1.0.22

9 years ago

1.0.21

9 years ago

1.0.20

9 years ago

1.0.19

9 years ago

1.0.18

9 years ago

1.0.17

9 years ago

1.0.16

9 years ago

1.0.15

9 years ago

1.0.14

9 years ago

1.0.13

9 years ago

1.0.12

9 years ago

1.0.11

9 years ago

1.0.10

9 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

0.0.1

10 years ago

1.0.0

10 years ago