semantic-ng2
Semantic-UI package for Angular2
Last updated 3 years ago by lauparr .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install semantic-ng2 
SYNC missed versions from official npm registry.

Semantic-ng2

Installation

Using Angular CLI

Open terminal, go into folder where you want to create the project and run these commands

npm install -g angular-cli
ng new project-name

Go into the newly created folder and run

npm install -S semantic-ng2

After installing the semantic-ng2 package, edit following files:

  • angular-cli-build.js
vendorNpmFiles: [
    ...
    'semantic-ng2/**/*'
]
  • src/system-config.ts
const map: any = {
    'semantic-ng2': 'vendor/semantic-ng2'
};

const packages:any = {
    'semantic-ng2': {defaultExtension: 'js'}
};
  • src/index.html

Into the head tag

<link rel="stylesheet" href="vendor/semantic-ng2/build/css/vendors.css">
<link rel="stylesheet" href="vendor/semantic-ng2/build/css/semantic-ng2.css">

Before </body> tag

<script src="vendor/semantic-ng2/build/js/vendors-min.js"></script>
  • src/main.ts
import {SMT_PROVIDERS} from "semantic-ng2/semantic-ng2";
import {HTTP_PROVIDERS} from "@angular/http";

bootstrap(... , [HTTP_PROVIDERS, SMT_PROVIDERS]);

You can now use semantic-ng2 into all your components !

Usage

The import for all semantic-ng2 package classes is

import {...} from "semantic-ng2/semantic-ng2";

Edit src/app/project-name.component.ts file and add

import {SMT_DIRECTIVES} from "semantic-ng2/semantic-ng2";

Add into @Component annotation

@Component({
    ...,
    directives: [SMT_DIRECTIVES]
})

Edit src/app/project-name.component.html file and add

<a smt-button [circular]="true" [color]="'red'" [icon]="'user'">Button</a>

Finally, in the terminal, start the project

ng server

Now open your browser and go to the http://localhost:4200/ url.

You should be able to see a red circular button with a user icon and Button text :)

Current Tags

  • 0.0.14                                ...           latest (3 years ago)

14 Versions

  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.12                                ...           3 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (15)
Dev Dependencies (29)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |