ng-semantic v1.1.13
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.
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
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago