edcarroll / Ng2 Semantic Ui
Licence: mit
Semantic UI Angular Integrations (no jQuery)
Stars: ✭ 625
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng2 Semantic Ui
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+923.68%)
Mutual labels: web-components, angular-components
Delon
Delon is a set of essential modules for ng-alain. https://github.com/ng-alain/ng-alain/issues
Stars: ✭ 586 (-6.24%)
Mutual labels: angular-components
Po Angular
Biblioteca de componentes Angular.
Stars: ✭ 497 (-20.48%)
Mutual labels: angular-components
Github Elements
GitHub's Web Component collection.
Stars: ✭ 453 (-27.52%)
Mutual labels: web-components
Elix
High-quality, customizable web components for common user interface patterns
Stars: ✭ 546 (-12.64%)
Mutual labels: web-components
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) 🎨
Stars: ✭ 467 (-25.28%)
Mutual labels: web-components
Details Dialog Element
A modal dialog that's opened with <details>.
Stars: ✭ 603 (-3.52%)
Mutual labels: web-components
Simpla
Open, modular, and serverless content management for a modern web
Stars: ✭ 534 (-14.56%)
Mutual labels: web-components
Angular Commerce
Angular components for scaffolding online store
Stars: ✭ 526 (-15.84%)
Mutual labels: angular-components
Awesome Stenciljs
List of Awesome Web Components Built with StencilJS
Stars: ✭ 520 (-16.8%)
Mutual labels: web-components
Dark Mode Toggle
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
Stars: ✭ 550 (-12%)
Mutual labels: web-components
Ngx Auth Firebaseui
Angular Material UI component for firebase authentication
Stars: ✭ 518 (-17.12%)
Mutual labels: angular-components
Emoji Picker Element
A lightweight emoji picker for the modern web
Stars: ✭ 587 (-6.08%)
Mutual labels: web-components
Atomico
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
Stars: ✭ 481 (-23.04%)
Mutual labels: web-components
Remount
Mount React components to the DOM using custom elements
Stars: ✭ 522 (-16.48%)
Mutual labels: web-components
Ng Devui
华为云DevCloud，基于Angular的企业级前端组件库；DevUI components based on Angular
Stars: ✭ 616 (-1.44%)
Mutual labels: angular-components
ng2-semantic-ui
Semantic UI Angular Integrations, written in pure Angular - no JQuery required.
Introduction
Angular and jQuery don't go together - this is the fundamental principal of this library. It provides Angular component versions of the Semantic UI modules, so that you don't need to add jQuery to your app.
Note that only Semantic UI elements that use jQuery are recreated here - those written purely in CSS aren't included as they can be used in Angular apps already.
Installation & Usage
See the Documentation for installation instructions and extensive examples.
Dependencies
- Angular (^6.0.0)
- Semantic UI CSS (^2.3.1) (jQuery is not required)
Component Support
| Icon | Description |
|---|---|
| ✅ | Component supported by ng2-semantic-ui. |
| 🚀 | Semantic UI plugin supported by ng2-semantic-ui (not in Semantic UI Core). |
| ☑️ | Component supported natively by Semantic UI (CSS only). |
| ❌ | Component currently unavailable. |
| 🚫 | Component not applicable to Angular. |
| Elements | Collections | Views | Modules | Behaviors |
|---|---|---|---|---|
| ☑️ Button | ☑️ Breadcrumb | ☑️ Advertisment | ✅ Accordion | 🚫 API |
| ☑️ Container | ☑️ Form | ☑️ Card | ✅ Checkbox | 🚫 Form Validation |
| ☑️ Divider | ☑️ Grid | ☑️ Comment | 🚀 Collapse | 🚀 Localization |
| ☑️ Flag | ☑️ Menu | ☑️ Feed | 🚀 Datepicker | ❌ Visibiltiy |
| ☑️ Header | ✅ Message | ☑️ Item | ✅ Dimmer | |
| ☑️ Icon | 🚀 Pagination | ☑️ Statistic | ✅ Dropdown | |
| ☑️ Image | ☑️ Table | ❌ Embed | ||
| ☑️ Input | ✅ Modal | |||
| ☑️ Label | ✅ Popup | |||
| ☑️ List | ✅ Progress | |||
| ☑️ Loader | ✅ Rating | |||
| ☑️ Rail | ✅ Search | |||
| ☑️ Reveal | ❌ Shape | |||
| ☑️ Segment | ✅ Sidebar | |||
| ☑️ Step | ❌ Sticky | |||
| ✅ Tab | ||||
| ✅ Transition |
Want to help?
Want to file a bug, contribute some code, or improve documentation? Great! Please read the contributing guidelines to get going.
Development
To generate all library files:
$ npm run lib:compile
# use lib:compile:w to watch for changes
To run the demo app:
$ npm run demo:serve
Testing
To run the unit tests suite:
$ npm run test
License
MIT © Edward Carroll
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].