Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vladotesanovic/ngSemantic
Angular 2 building blocks :package: based on Semantic UI
https://github.com/vladotesanovic/ngSemantic
Last synced: about 1 month 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 (about 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 (about 2 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
## 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