{"id":13808863,"url":"https://github.com/tonysamperi/ngx-float-ui","last_synced_at":"2025-05-14T03:31:37.512Z","repository":{"id":205514730,"uuid":"714338581","full_name":"tonysamperi/ngx-float-ui","owner":"tonysamperi","description":"Angular wrapper for floating-ui","archived":false,"fork":false,"pushed_at":"2024-08-23T17:56:11.000Z","size":818,"stargazers_count":24,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-07T19:09:27.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tonysamperi.github.io/ngx-float-ui/","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/tonysamperi.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T16:05:24.000Z","updated_at":"2024-10-26T07:40:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"246eaf9e-037b-4334-873b-120ef28837b7","html_url":"https://github.com/tonysamperi/ngx-float-ui","commit_stats":null,"previous_names":["tonysamperi/ngx-float-ui"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-float-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-float-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-float-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-float-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tonysamperi","download_url":"https://codeload.github.com/tonysamperi/ngx-float-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273282,"owners_count":17448077,"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-08-04T01:01:53.728Z","updated_at":"2025-05-14T03:31:37.505Z","avatar_url":"https://github.com/tonysamperi.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries"],"readme":"# ngx-float-ui  \n\n[![npm][badge-npm-version]][url-npm] [![npm][badge-npm-downloads]][url-npm] [![MIT licensed][badge-licence]][url-licence] [![Build state][badge-ci-state]][url-ci-state] [![Size][badge-bundle]][url-bundle] [![Rate this package][badge-openbase]][url-openbase]\n\nngx-float-ui is an angular wrapper for the [FloatingUI](https://floating-ui.com/) library (v ^1.5.3).\n\n## VERY IMPORTANT READ THIS\nI'm moving this to the top because it appears that people don't get to reading it in the **contribute** section.\nFOR THIS LIBRARY **PLEASE USE ISSUES ONLY FOR BUG REPORTING**. DON'T OPEN ISSUES SUCH AS \"I need upgrade for Angular 1745646456\" especially if Angular 1745646456 was released a few days ago.\nI **guarantee** that I manage the updates **AS SOON AS POSSIBLE**. But as you understand this is not a paying job, so you can't get Angular 1745646456 the day it gets released.\n**ISSUES NOT RESPECTING THIS WILL BE DELETED IMMEDIATELY WITHOUT ANY RESPONSE**.\nThank you.\n\n### Premise\n\nThe goal of this library is to adopt the more promising technology of floating-ui instead of popper.js and make it available in our Angular projects.\n\n### Installation\n\nnode and npm are required to run this package.\n\n1. Use npm/yarn to install the package:\n\n  ```terminal\n  $ npm install @floating-ui/dom ngx-float-ui --save\n  ```\n  \n  Or \n  \n   ```terminal\n    $ yarn add @floating-ui/dom --save\n    $ yarn add ngx-float-ui --save \n  ```\n\n2. You simply add into your module `NgxFloatUiModule`:\n\n  ```typescript\n  import {NgxFloatUiModule} from 'ngx-float-ui';\n  \n  @NgModule({\n   // ...\n   imports: [\n     // ...\n     NgxFloatUiModule\n   ]\n  })\n  ```\n\nOptionally you can include in your `styles.css` / `styles.css` one of the prebuilt themes:\n* `@import node_modules/ngx-float-ui/css/theme-dark.css`\n* `@import node_modules/css/theme-white.css`\n\n* `@use ngx-float-ui/scss/theme as floatUiBaseTheme`\n* `@use ngx-float-ui/scss/theme-dark as floatUiDarkTheme`\n* `@use ngx-float-ui/scss/theme-white floatUiWhiteTheme`\n\nor easily create your own theme using the @mixin:\n\n```\n@use \"ngx-float-ui/scss/theme\" as floatUiBaseTheme;\n\nbody {\n    @include floatUiBaseTheme.ngx-float-ui-theme($background-color, $text-color, $max-width, $z-index);\n}\n```\n\n3. Add to view:\n\n  ```HTML  \n   \u003cfloat-ui-content #popper1Content\u003e\n       \u003cp class=\"bold\"\u003ePopper on bottom\u003c/p\u003e\n   \u003c/float-ui-content\u003e\n   \u003cdiv [floatUi]=\"popper1Content\"\n        [showOnStart]=\"true\"\n        [showTrigger]=\"'click'\"\n\t\thideOnClickOutside\n        [hideOnScroll]=\"true\"\n        [placement]=\"'bottom'\"\u003e\n       \u003cp class=\"bold\"\u003eHey!\u003c/p\u003e\n       \u003cp class=\"thin\"\u003eChoose where to put your popper!\u003c/p\u003e         \n   \u003c/div\u003e\n  ```\n\n4. As text:\n ```HTML\n      \u003cdiv floatUi=\"As text\"\n           [showTrigger]=\"'hover'\"\n           [placement]=\"'bottom'\"\n           (onShown)=\"onShown($event)\"\u003e\n        \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n        \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n      \u003c/div\u003e\n ```\n\n  ```HTML\n       \u003cdiv floatUi=\"{{someTextProperty}}\"\n            [showTrigger]=\"'hover'\"\n            [placement]=\"'bottom'\"\n            [styles]=\"{'background-color: 'blue''}\"\n            (onShown)=\"onShown($event)\"\u003e\n         \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n         \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n       \u003c/div\u003e\n  ```\n \n  5. Position fixed, breaking overflow:\n   ```HTML\n        \u003cdiv floatUi=\"As text\"\n             [showTrigger]=\"'hover'\"\n             [placement]=\"'bottom'\"\n             [positionFixed]=\"true\"\n             (onShown)=\"onShown($event)\"\u003e\n        \u003c/div\u003e\n   ```\n \n 6. Specific target:\n  ```HTML\n \u003cdiv class=\"example\"\u003e\n       \u003cdiv #popperTargetElement\u003e\u003c/div\u003e\n       \u003cdiv floatUi=\"As text\"\n            showTrigger=\"hover\"\n            placement=\"bottom\"\n            [targetElement]=\"popperTargetElement.nativeElement\"\n            (onShown)=\"onShown($event)\"\u003e\n       \u003c/div\u003e\n  ```\n  \n7. hide/show programmatically:\n  ```HTML\n   \u003cdiv [floatUi]=\"tooltipcontent\"\n        showTrigger=\"hover\"\n        placement=\"bottom\"\n        [applyClass]=\"'popperSpecialStyle'\"\u003e\n        \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n        \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cfloat-ui-content #tooltipcontent\u003e\n        \u003cdiv\u003e\n          \u003cp\u003eThis is a tooltip with text\u003c/p\u003e\n          \u003cspan (click)=\"tooltipcontent.hide()\"\u003eClose\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/float-ui-content\u003e\n  ```\n \n8. Attributes map:  \n  \n    | Option             | Type              | Default   | Description                                                                            |\n    |:-------------------|:----------------  |:--------- |:---------------------------------------------------------------------------------------|\n    | disableAnimation   | boolean           | false     | Disable the default animation on show/hide                                             |\n    | disableStyle       | boolean           | false     | Disable the default styling                                                            |\n    | disabled           | boolean           | false     | Disable the popper, ignore all events                                                  |\n    | showDelay          | number            | 0         | Delay time until popper it shown                                                       |\n    | hideTimeout        | number            | 0         | Set delay before the popper is hidden                                                  |\n    | timeoutAfterShow   | number            | 0         | Set a time on which the popper will be hidden after it is shown                        |\n    | placement          | Placement(string) | auto      | The placement to show the popper relative to the reference element *                   |\n    | targetElement      | HtmlElement       | auto      | Specify a different reference element other the the one hosting the directive          |\n    | boundaries         | string(selector)  | undefined | Specify a selector to serve as the boundaries of the element                           |\n    | showOnStart        | boolean           | false     | Popper default to show                                                                 |\n    | showTrigger        | Trigger(string)   | click     | Trigger/Event on which to show/hide the popper                                         |\n    | positionFixed      | boolean           | false     | Set the popper element to use position: fixed                                          |\n    | appendTo           | string            | undefined | append The popper-floatUi element to a given selector, if multiple will apply to first |\n    | preventOverflow    | boolean           | undefined | Prevent the popper from being positioned outside the boundary *                        |\n    | hideOnClickOutside | boolean           | true      | Popper will hide on a click outside                                                    |\n    | hideOnScroll       | boolean           | false     | Popper will hide on scroll                                                             |\n    | hideOnMouseLeave   | boolean           | false     | Popper will hide on mouse leave                                                        |\n    | applyClass         | string            | undefined | list of comma separated class to apply on ngpx__container                              |\n    | styles             | Object            | undefined | Apply the styles object, aligned with ngStyles                                         |\n    | applyArrowClass    | string            | undefined | list of comma separated class to apply on ngpx__arrow                                  |\n    | onShown            | EventEmitter\u003c\u003e    | $event    | Event handler when popper is shown                                                     |\n    | onHidden           | EventEmitter\u003c\u003e    | $event    | Event handler when popper is hidden                                                    |\n    | onUpdate           | EventEmitter\u003c\u003e    | $event    | Event handler when popper is updated                                                   |\n    | ariaDescribeBy     | string            | undefined | Define value for aria-describeby attribute                                             |\n    | ariaRole           | string            | popper    | Define value for aria-role attribute                                                   |\n\n\\* **VERY IMPORTANT**: All the \"auto\" placements can't be used in combo with prevent overflow (as per float-ui specs), because the two algorythms **would conflict**, ending in infinite repositioning.\nSee [here](https://floating-ui.com/docs/autoPlacement#usage)\n\n9. Override defaults:\n\n    ngx-float-ui comes with a few default properties you can override in default to effect all instances\n    These are overridden by any child attributes.\n\n```JavaScript\nNgModule({\n    imports: [\n        BrowserModule,\n        FormsModule,\n        NgxFloatUiModule.forRoot({placement: NgxFloatUiPlacements.TOP})],\n    declarations: [AppComponent],\n    providers: [],\n    bootstrap: [AppComponent]\n\n});\n```\n  \n   | Options               | Type                             | Default   |\n   |:----------------------|:---------------------------------|:----------|\n   | showDelay             | number                           | 0         |\n   | disableAnimation      | boolean                          | false     |\n   | disableDefaultStyling | boolean                          | false     |\n   | placement             | NgxFloatUiPopPlacements (string) | auto      |\n   | boundariesElement     | string(selector)                 | undefined |\n   | showTrigger           | NgxFloatUiTriggers (string)      | hover     |\n   | positionFixed         | boolean                          | false     |\n   | hideOnClickOutside    | boolean                          | true      |\n   | hideOnMouseLeave      | boolean                          | false     |\n   | hideOnScroll          | boolean                          | false     |\n   | applyClass            | string                           | undefined |\n   | styles                | Object                           | undefined |\n   | applyArrowClass       | string                           | undefined |\n   | ariaDescribeBy        | string                           | undefined |\n   | ariaRole              | string                           | undefined |\n   | appendTo              | string                           | undefined |\n   | preventOverflow       | boolean                          | undefined |\n\n10. NgxFloatUiPopPlacements:\n\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'bottom-start'\n  | 'left-start'\n  | 'right-start'\n  | 'top-end'\n  | 'bottom-end'\n  | 'left-end'\n  | 'right-end'\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  \n11. NgxFloatUiTriggers:\n\n  | 'click'\n  | 'mousedown'\n  | 'hover'\n  | 'none'\n\n### Liking hardcoded strings everywhere? Too lazy to use Enums? No problem mate!\n\n`floatUiLoose` is what you're looking for!\n\nYou can then use `loosePlacement` and `looseTrigger` passing the values above as strings!\n    \n### Demo site with sample codes\n\u003ca href=\"https://tonysamperi.github.io/ngx-float-ui/\"\u003eDemo of ngx-float-ui\u003c/a\u003e\n\n### Contribute\n  You can only **report bugs**. Every other issue will be deleted right away.\n  \n```terminal\n  $ npm install\n  $ npm run start  //run example\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n\n### Thanks to\n\nThe developers of Floating UI\n\n[badge-bundle]: https://img.shields.io/bundlephobia/minzip/ngx-float-ui\n[badge-ci-state]: https://github.com/tonysamperi/ngx-float-ui/actions/workflows/main.yml/badge.svg\n[badge-licence]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[badge-npm-downloads]: https://img.shields.io/npm/dm/ngx-float-ui.svg?style=flat-square\n[badge-npm-version]: https://img.shields.io/npm/v/ngx-float-ui.svg?style=flat-square\n[badge-openbase]: https://badges.openbase.com/js/rating/ngx-float-ui.svg\n[url-bundle]: https://img.shields.io/bundlephobia/minzip/ngx-float-ui\n[url-ci-state]: https://github.com/tonysamperi/ngx-float-ui/actions\n[url-licence]: https://github.com/tonysamperi/ngx-float-ui/blob/master/LICENSE\n[url-npm]: https://www.npmjs.com/package/ngx-float-ui\n[url-openbase]: https://openbase.com/js/ngx-float-ui\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-float-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonysamperi%2Fngx-float-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-float-ui/lists"}