Semantic UI Angular Integrations

Overview

Semantic-UI-Angular

Join the chat at https://gitter.im/Semantic-Org/Semantic-UI-Angular Build Status Dependency Status devDependency Status Commitizen friendly

Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in the future. We've decided to use TypeScript as a step to Angular 2 friendly environment.

Status

Work in progress

We are working on setting up proper environment, contribution guidelines and everything else for comfortable community contributions. Once we release first alpha.0 we are happy to get community help.

Support

We support AngularJS 1.4.8 version.

Building Semantic-UI-Angular

You have to have nodejs installed before running following commands.

npm install
npm run build

The distribution packages will be stored in dist folder.

Running tests

Single run:

npm test

Dev mode:

npm run test-dev
Comments
  • About this project

    About this project

    Will this ever release? Because there are many developers(you can't imagine how much! Some includes Aliens too...) waiting to see Semantic UI in Angular JS. If so when can we expect the first release?

    opened by cooljith91112 30
  • Step forward

    Step forward

    Hey guys, I hope I will get more free time soon and get back to this project. I wanna know what do you think we should choose as a step forward for the project.

    Well, I am talking about tree options:

    • We just upgrade up to angular 1.4, as a big part of which is a new API for animations.
    • We're taking step 1 and adding ES6 with its sweet features.
    • We're moving even more further and considering to use TypeScript, with its power.

    As the code base is really small at this moment but new tech is actively coming we probably need to discuss about plans for the future.

    I'd vote for the second option.

    Please, share your thoughts

    opened by m0t0r 13
  • Semantic ui elements checkbox

    Semantic ui elements checkbox

    @m0t0r @caitp Please review. Just starting with something simple so I can get aligned with project style and convention. Any feedback on best practices for performance (VM optimizations) would be heeded well.

    Regarding checkboxes, I'm wondering, should they somehow share logic with radio buttons (radio groups can use a checkbox style, etc)?

    Some general questions that I have are:

    1. Are we going for exact feature parity, or is there some flexibility to prioritize? (uncheckable checkboxes for example?).
    2. Do we want to implement semantic ui style “on-*” callbacks (rather than leaving that to angular and the user when it makes sense)?
    opened by stevenkampen 13
  • sm-radio-button design questions

    sm-radio-button design questions

    I am planning to create a radio button directive (sm-radio-button) which should probably work in conjunction with sm-radio-group directive which manages a set of sm-radio-button directive. This design is borrowed from angular-material. So, in generic case it should look like:

    <sm-radio-group ng-model="radio">
        <sm-radio-button value="radio1">Radio 1</sm-radio-button>
        <sm-radio-button value="radio2">Radio 2</sm-radio-button>
        <sm-radio-button value="radio3">Radio 3</sm-radio-button>
    </sm-radio-group>
    

    I have a couple of questions:

    1. Angular-design has a set of custom services such as '$mdConstant', '$mdUtil'. Should I consider analogues services as well since they look like good ideas.

    2. Is design using controller's prototype to set helper methods considered suitable for us as well ?

    3. What else should I consider ?

    @caitp please take a look once you have a chance.

    opened by m0t0r 10
  • modal directive?

    modal directive?

    I am wanting to use semantic's modal module in a way similar to the AngularUI-bootstrap modal directive. Unfortunately my Angular-foo is not yet strong enough to write it myself. Is anyone working on more directives for semantic-ui and angular?

    opened by micha-LEAP 8
  • Changed jshint to eslint

    Changed jshint to eslint

    We want to change to es6 with angular 1.4, so to do that its better to use eslint. It include es6 features and its a better lint solution.

    Notes:

    • PR has some files changes because I made some chages in indent and max-len.
      • Eslint not have all the features jshint, so some things were taken and subsequently be reviewed, but not something that would prevent the change.

    @caitp @m0t0r

    opened by matheuspoleza 7
  • Checkbox work only once

    Checkbox work only once

    Hi everyone,

    I have got a weird problem with Safari, Firefox and Chrome about checkboxes.

    They work but I can only see one time the tick.

    Example:

    • [x] Checkbox // Click -> $scope.checked = false;
    • [ ] Checkbox // Click -> $scope.checked = true;
    • [x] Checkbox // Click -> $scope.checked = false;
    • [x] Checkbox // Click -> $scope.checked = true;
    • etc.

    I have take a look in the source code, all seems fine. I have also watch the element to see any modifications. Value of the element is correct, when $scope.checked = true the element has checked="checked".

    Have you any ideas?

    Thanks.

    opened by RomainLanz 7
  • Semantic-UI-Angular:  sm-button  directive

    Semantic-UI-Angular: sm-button directive

    WIP: sm-button is a generic button directive. I took as a base idea the design from angular-material.

    A few thing to note:

    • I have created a service (ariaHelper) to check if an element has aria specific attribute.
    • Currently I've decided to use "sm-" prefix. I liked it more than "sem-".
    • Unit tests are coming.

    @caitp reconsidered design and second attempt :)

    opened by m0t0r 4
  • Dropdown list can't be chosen the option marked with attribute 'selected'!

    Dropdown list can't be chosen the option marked with attribute 'selected'!

    Dropdown list can't be selected the option marked with attribute 'selected' on the SemanticUI Framework with AngularJS. By default remains placeholder.

    .directive('mydropdown', function () {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                "items": "=",
                "model": "=",
                "inputModel": "@",
                "inputName": "@"
            },
            template: '<select class="ui dropdown" name="{{ inputName }}" ng-model="model[inputName]"><option ng-repeat="item in items" value="{{item.id}}" ng-selected="model[inputName]==item.id" ng-bind="item.title"></option></select>',
            link: function (scope, element, attrs) {
                $(element).dropdown();
            }
        };
    })
    
    opened by ismorodin 3
  • Have some directive in javascript, interested?

    Have some directive in javascript, interested?

    I wrote directives for modal, pop-up and dropdown. Is there an interest that I up-load them?

    I did not find any clear rules in #8 but I noticed that what I have is very different from what is here already.

    my approach: Since there was nothing really working available I took a very simple approach:

    • Using semantic-ui's native java script
    • Minimum logic, basically passing through all settings and behaviors to semantic-ui's java scripts
    • Almost no manipulation of CSS classes from of directive, I think semantic-ui looks really good as it is and matches angular nicely
    opened by PD75 2
  • License?

    License?

    I never really defined an explicit license for angular-semantic, MIT is always a good pick, so that gets my vote --- I'll leave this up to @m0t0r and Jack, though.

    opened by caitp 2
  • Convert Semantic-UI-React to Semantic-UI-Angular with Microsoft Angular-React project.

    Convert Semantic-UI-React to Semantic-UI-Angular with Microsoft Angular-React project.

    Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of Office UI Fabric, where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.

    Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.

    You can see how Microsoft converts Semantic-UI-React to Semantic-UI-Angular here.

    opened by Maxvien 0
  • angular 7 support + new features

    angular 7 support + new features

    Hi, We are currently working on an Angular 7 project and were wondering if there is going to be a release on new features like in the semantic-react repo. The features we are currently using are from ng2-semantic repo, which are great but not enough. Do you plan on supporting angular? or the framework support is officially abandoned by you? thanks.

    opened by unplugguitar 7
  • Semantic-UI-Angular should be changed to Semantic-UI-AngularJS

    Semantic-UI-Angular should be changed to Semantic-UI-AngularJS

    Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in the future. We've decided to use TypeScript as a step to Angular 2 friendly environment.

    I think the name Semantic-UI-Angular is confusing to Angular developers because Angular refers to https://angular.io/ . Blog: https://blog.angularjs.org/2016/12/ok-let-me-explain-its-going-to-be.html

    opened by dnutiu 3
  • No Bower Package?

    No Bower Package?

    Hi, I want to use this in my existing yeoman-angular generated project which depends on the bower components to make client-side package management easy but unfortunately i cant see the bower command in docs.

    opened by arahmanali 0
  • Does the latest version of Semantic-UI support Angular 4 Webpack?

    Does the latest version of Semantic-UI support Angular 4 Webpack?

    I have an Angular 4 project which will be updated in the future to the latest Angular version. I am thinking about using Semantic-UI-Angular but I am having trouble getting a clear "answer" if Semantic-UI-Angular can be integrated with an Angular 4+ project, the documents seem to stop at Angular 2. Is there support with the Semantic-UI-Angular for an Angular 4 application, (also future versions of Angular)?

    opened by jaycdave88 3
Owner
Semantic Org
Semantic Organization
Semantic Org
Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Samet ÇELİKBIÇAK 4 Nov 1, 2022
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

angular-eslint 1.4k Dec 29, 2022
Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

RxAngular 1.5k Jan 5, 2023
The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

PatternFly 87 Nov 15, 2022
Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBAngular 5 Demo 500+ material UI components Super s

MDBootstrap 1.1k Dec 30, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

NG-ZORRO 8.3k Jan 6, 2023
Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

null 910 Dec 8, 2022
Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

AngularUI 14.4k Jan 3, 2023
NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

ng-bootstrap 8k Dec 24, 2022
🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022
Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!

Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy

BART! 19 Dec 18, 2022
The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Valor Software 5.4k Jan 8, 2023
Customizable Angular UI Library based on Eva Design System

Nebular Documentation | Stackblitz Template | UI Bakery - Angular UI Builder | Angular templates Nebular is a customizable Angular 10 UI Library with

Akveo 7.7k Dec 31, 2022
A set of UI components for use with Angular 2 and Bootstrap 4.

#Fuel-UI A set of UI components for use with Angular 2 and Bootstrap 4. See Fuel-UI homepage for live demo and documentation. ##Dependencies Node Gulp

Fuel Interactive 302 Jul 4, 2022
Element for Angular

Element for Angular Catalog Documentation Getting Started Contribution Support LICENSE Documentation element-angular Getting Started Install: # instal

饿了么前端 520 Nov 14, 2022