|
| 1 | +<!-- Logo --> |
| 2 | +<p align="center"> |
| 3 | + <a href="https://tryharddood.github.io/ngx-fomantic-ui/"> |
| 4 | + <img height="128" width="238" src="https://raw.githubusercontent.com/tryharddood/ngx-fomantic-ui/master/demo/src/assets/logo.png"> |
| 5 | + </a> |
| 6 | +</p> |
| 7 | + |
| 8 | +<!-- Name --> |
| 9 | +<h1 align="center"> |
| 10 | + <a href="https://tryharddood.github.io/ngx-fomantic-ui">ngx-fomantic-ui</a> |
| 11 | +</h1> |
| 12 | + |
| 13 | +<!-- Badges --> |
| 14 | +<p align="center"> |
| 15 | + <a href="https://www.npmjs.com/package/ngx-fomantic-ui"> |
| 16 | + <img alt="npm" src="https://img.shields.io/npm/v/ngx-fomantic-ui.svg?style=flat-square" /> |
| 17 | + </a> |
| 18 | + <a href="https://www.npmjs.com/package/ngx-fomantic-ui"> |
| 19 | + <img alt="monthly downloads" src="https://img.shields.io/npm/dm/ngx-fomantic-ui.svg?style=flat-square" /> |
| 20 | + </a> |
| 21 | +</p> |
| 22 | + |
| 23 | +Fomantic UI Angular Integrations, written in pure Angular - **no JQuery required**. |
| 24 | + |
| 25 | +## Introduction |
| 26 | + |
| 27 | +Angular and jQuery don't go together - this is the fundamental principal of this library. It provides Angular component versions of the Fomantic UI modules, so that you don't need to add jQuery to your app. |
| 28 | + |
| 29 | +Note that only Fomantic 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. |
| 30 | + |
| 31 | +## Installation & Usage |
| 32 | + |
| 33 | +See the [Documentation](https://tryharddood.github.io/ngx-fomantic-ui) for installation instructions and extensive examples. |
| 34 | + |
| 35 | +## Dependencies |
| 36 | + |
| 37 | +* [Angular](https://angular.io) (^7.0.0) |
| 38 | +* [Fomantic UI CSS](http://fomantic-ui.com/) (^2.7.4) (jQuery is **not** required) |
| 39 | + |
| 40 | +## Component Support |
| 41 | + |
| 42 | +| Icon | Description | |
| 43 | +|-------------------------|-------------------------------------------------------------------------------------| |
| 44 | +| :white_check_mark: | Component supported by ngx-fomantic-ui. | |
| 45 | +| :rocket: | Fomantic UI plugin supported by ngx-fomantic-ui (not in Fomantic UI Core). | |
| 46 | +| :ballot_box_with_check: | Component supported natively by [Fomantic UI](https://fomantic-ui.com/) (CSS only). | |
| 47 | +| :x: | Component currently unavailable. | |
| 48 | +| :no_entry_sign: | Component not applicable to Angular. | |
| 49 | + |
| 50 | +| Elements | Collections | Views | Modules | Behaviors | |
| 51 | +|------------------------------------|------------------------------------|------------------------------------------|-----------------------------------|-------------------------------------| |
| 52 | +| :ballot_box_with_check: Button | :ballot_box_with_check: Breadcrumb | :ballot_box_with_check: Advertisment | :white_check_mark: Accordion | :no_entry_sign: API | |
| 53 | +| :ballot_box_with_check: Container | :ballot_box_with_check: Form | :ballot_box_with_check: Card | :white_check_mark: Checkbox | :no_entry_sign: Form Validation | |
| 54 | +| :ballot_box_with_check: Divider | :ballot_box_with_check: Grid | :ballot_box_with_check: Comment | :rocket: Collapse | :rocket: Localization | |
| 55 | +| :ballot_box_with_check: Flag | :ballot_box_with_check: Menu | :ballot_box_with_check: Feed | :rocket: Datepicker | :x: Visibiltiy | |
| 56 | +| :ballot_box_with_check: Header | :white_check_mark: Message | :ballot_box_with_check: Item | :white_check_mark: Dimmer | | |
| 57 | +| :ballot_box_with_check: Icon | :rocket: Pagination | :ballot_box_with_check: Statistic | :white_check_mark: Dropdown | | |
| 58 | +| :ballot_box_with_check: Image | :ballot_box_with_check: Table | | :x: Embed | | |
| 59 | +| :ballot_box_with_check: Input | | | :white_check_mark: Modal | | |
| 60 | +| :ballot_box_with_check: Label | | | :white_check_mark: Popup | | |
| 61 | +| :ballot_box_with_check: List | | | :white_check_mark: Progress | | |
| 62 | +| :ballot_box_with_check: Loader | | | :white_check_mark: Rating | | |
| 63 | +| :ballot_box_with_check: Rail | | | :white_check_mark: Search | | |
| 64 | +| :ballot_box_with_check: Reveal | | | :x: Shape | | |
| 65 | +| :ballot_box_with_check: Segment | | | :white_check_mark: Sidebar | | |
| 66 | +| :ballot_box_with_check: Step | | | :x: Sticky | | |
| 67 | +| | | | :white_check_mark: Tab | | |
| 68 | +| | | | :white_check_mark: Transition | | |
| 69 | + |
| 70 | +## Development |
| 71 | + |
| 72 | +To generate all library files: |
| 73 | + |
| 74 | +```bash |
| 75 | +$ npm run lib:compile |
| 76 | +# use lib:compile:w to watch for changes |
| 77 | +``` |
| 78 | + |
| 79 | +To run the demo app: |
| 80 | +```bash |
| 81 | +$ npm run demo:serve |
| 82 | +``` |
| 83 | + |
| 84 | +## Testing |
| 85 | + |
| 86 | +To run the unit tests suite: |
| 87 | +```bash |
| 88 | +$ npm run test |
| 89 | +``` |
| 90 | + |
| 91 | +## Credits and License |
| 92 | + |
| 93 | +* MIT © [Edward Carroll](https://github.com/edcarroll) |
0 commit comments