{"id":13481157,"url":"https://github.com/vladotesanovic/ngSemantic","last_synced_at":"2025-03-27T11:31:59.123Z","repository":{"id":57241281,"uuid":"43256426","full_name":"vladotesanovic/ngSemantic","owner":"vladotesanovic","description":"Angular 2 building blocks :package: based on Semantic UI","archived":false,"fork":false,"pushed_at":"2019-04-16T13:48:03.000Z","size":7968,"stargazers_count":973,"open_issues_count":94,"forks_count":148,"subscribers_count":66,"default_branch":"master","last_synced_at":"2024-10-25T22:49:48.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ng-semantic.herokuapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vladotesanovic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-27T17:23:04.000Z","updated_at":"2024-06-23T04:53:28.000Z","dependencies_parsed_at":"2022-09-05T17:00:30.389Z","dependency_job_id":null,"html_url":"https://github.com/vladotesanovic/ngSemantic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladotesanovic%2FngSemantic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladotesanovic%2FngSemantic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladotesanovic%2FngSemantic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladotesanovic%2FngSemantic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vladotesanovic","download_url":"https://codeload.github.com/vladotesanovic/ngSemantic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222239534,"owners_count":16953970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:49.233Z","updated_at":"2024-10-30T14:31:21.286Z","avatar_url":"https://github.com/vladotesanovic.png","language":"TypeScript","funding_links":["https://www.paypal.me/ngsemantic"],"categories":["Uncategorized","TypeScript","design systems","UI Components","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"[![GitHub version](https://badge.fury.io/gh/vladotesanovic%2FngSemantic.png)](http://badge.fury.io/gh/vladotesanovic%2FngSemantic)\n[![Dependency Status](https://david-dm.org/vladotesanovic/ngSemantic.svg)](https://david-dm.org/vladotesanovic/ngSemantic)\n[![Build Status](https://travis-ci.org/vladotesanovic/ngSemantic.svg?branch=master)](https://travis-ci.org/vladotesanovic/ngSemantic)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/hyperium/hyper/master/LICENSE)\n[![Support via PayPal](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/ngsemantic)\n\n# Angular2 \u0026 Semantic UI\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://i.imgur.com/SCTxyan.jpg\" alt=\"Angular 2\"/\u003e\u003cbr/\u003e\n  \u003ca href=\"http://www.angular.io\" target=\"_blank\"\u003eAngular2\u003c/a\u003e - \u003ca href=\"http://semantic-ui.com\" target=\"_blank\"\u003eSemantic UI\u003c/a\u003e\n\u003c/p\u003e\n\n## Live demo\n\u003ca href=\"https://ng-semantic.herokuapp.com\" target=\"_blank\"\u003eng-semantic.herokuapp.com\u003c/a\u003e\n\n\u003cul\u003e\n   \u003cli\u003eAngular 2 \u003c/li\u003e\n   \u003cli\u003eSemantic UI version: 2.2.2\u003c/li\u003e\n\u003c/ul\u003e\n\n## Installation\n```bash\nnpm install ng-semantic --save\n```\n\n## Angular CLI configuration ( Webpack )\n\nInstall `jQuery` with NPM\n```bash\nnpm install jquery --save\n```\n\nDownload \u003ca href=\"https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip\" target=\"_blank\"\u003eOfficial Semantic UI bundle ( .zip ) from Semantic-Org\u003c/a\u003e\n\nAdd `semantic.min.css`, `semantic.min.js`, `jquery` to the `angular-cli.json` as follows:\n```javascript\n\n...\n\n\"apps\": [{\n  ... \n  \"styles\": [\n      \"styles.css\",\n      \"../path/to/semantic.min.css\" // \n  ],\n  \"scripts\": [\n      \"../node_modules/jquery/dist/jquery.min.js\",\n      \"../path/to/semantic.min.js\"\n  ],\n  ...\n}]\n\n\n```\n\n## Use\n\nThen you can use in a component as follows:\n\n```javascript\n// Module\nimport { NgModule } from \"@angular/core\";\nimport { NgSemanticModule } from \"ng-semantic\";\n\n@NgModule({\n    bootstrap:    [ AppComponent ],\n    declarations: [ AppComponent ],\n    imports:      [ BrowserModule, NgSemanticModule ]\n})\nexport class AppModule {}\n\n// Component\nimport {Component} from '@angular/core';\n\n@Component({\nselector: 'demo-cmp',\ntemplate: `\n \u003csm-segment class=\"raised\"\u003e\n    Hello\n \u003c/sm-segment\u003e\n `\n})\nexport class DemoComponent {}\n```\n## Custom configuration\n\nSemantic UI ( minified versions of css and js ) must be loaded in index.html\n\n```html\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css\"\u003e\n\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js\"\u003e\u003c/script\u003e\n```\n\n## Support / Donations\n\nIf 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.\n\n[![Support via PayPal](https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg)](https://www.paypal.me/ngsemantic)\n\n####  Angular 2 QuickStart with ngSemantic\nhttps://github.com/vladotesanovic/angular2-quickstart-ngsemantic\n\n####  Angular 2 CLI with ngSemantic\nhttps://github.com/vladotesanovic/angular2-cli-webpack\n\n### Development\n```bash\ngit clone https://github.com/vladotesanovic/ngSemantic.git\ncd ngSemantic\n\n# install dependencies\nnpm install\n\n# compile demo project\nnpm start\n```\n\n### Components\n\n  - sm-accordion\n  - sm-button\n  - sm-loader\n  - sm-header\n  - sm-message\n  - sm-popup\n  - sm-segment\n  - sm-modal\n  - sm-sidebar\n  - sm-dimmer\n  - sm-flag\n  - sm-input\n  - sm-checkbox\n  - sm-rating\n  - sm-dropdown\n  - sm-select\n  - sm-search\n  - sm-textarea\n  - sm-progress\n  - sm-card\n  - sm-shape\n  - sm-tabs \u0026 sm-tab\n  - sm-list\n  - sm-item\n  - smDirTooltip\n  - smDeviceVisibility\n  - smDirVisibility\n\n## Licence\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladotesanovic%2FngSemantic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvladotesanovic%2FngSemantic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladotesanovic%2FngSemantic/lists"}