Tiny Angular library to create overlays for tooltips, modals, dropdowns, alerts, toastr, popovers, menus, and more
Demo and documentation
Installation
step 1: Install from npm or yarn
npm install toppy // oryarn add toppy
step 2: Import ToppyModule
in your main module
;
step 3: Import Toppy
service in your component
; // <==
Content
Toppy allows to use string
, html
, TemplateRef
, Component
as overlay content.
Plain text
this.overlay = this._toppy .positionposition .content`some plain text content` // simple text .create;
HTML content
this.overlay = this._toppy .positionposition .content`<div>any HTML content</div>`, // html .create;
Using TemplateRef
Hello world!
tpl:TemplateRef<any>; this.overlay = this._toppy .positionposition .contentthis.tpl // template ref .create;
Component
// host component
this.overlay = this._toppy .positionposition .contentHelloComponent // <== .create;
Dont forget to add host component in
entryComponents
in module
Positions
Position determines the location and size of the overlay. There are four positions:
Relative position
Overlay position that is relative to specific element. These are used in tooltips
, popovers
, dropdowns
, menus
new RelativePosition;
Relative position supports 12 placements:
OutsidePlacement.BOTTOM;OutsidePlacement.BOTTOM_LEFT;OutsidePlacement.BOTTOM_RIGHT;OutsidePlacement.LEFT;OutsidePlacement.LEFT_BOTTOM;OutsidePlacement.LEFT_TOP;OutsidePlacement.RIGHT;OutsidePlacement.RIGHT_BOTTOM;OutsidePlacement.RIGHT_TOP;OutsidePlacement.TOP;OutsidePlacement.TOP_LEFT;OutsidePlacement.TOP_RIGHT;
Global position
Overlay position that is relative to window viewport. These are used in modals
, alerts
, toastr
new GlobalPosition;
Global position supports 9 placements:
InsidePlacement.BOTTOM;InsidePlacement.BOTTOM_LEFT;InsidePlacement.BOTTOM_RIGHT;InsidePlacement.LEFT;InsidePlacement.RIGHT;InsidePlacement.TOP;InsidePlacement.TOP_LEFT;InsidePlacement.TOP_RIGHT;InsidePlacement.CENTER;
Slide position
Overlay position that is relative to window viewport. These are used in side panels
, sidebars
, blade
new SlidePosition;
Slide position supports 2 placements:
SlidePlacement.LEFT;SlidePlacement.RIGHT;
Fullscreen position
Overlay that occupies complete size of the viewport.
new FullScreenPosition;
Configuration
this.toppy .positionposition: ToppyPosition .configconfiguration: ToppyConfig = .content'hello' .create;
property |
for |
---|---|
backdrop | boolean · whether to show backdrop layer · default: false |
closeOnEsc | boolean · clicking Escape button will close overlay · default: false |
closeOnDocClick | boolean · dismiss on clicking outside of content · default: false |
listenWindowEvents | boolean · auto adjust the position on scroll/resize · default: true |
containerClass | string · overlay container class name · default: t-overlay |
wrapperClass | string · overlay wrapper class name · default: '' |
backdropClass | string · overlay backdrop class name · default: '' |
bodyClass | string · body class when overlay is open · default: t-open |
windowResizeCallback | function · triggered on window scroll |
docClickCallback | function · triggered on document click |
Component communication
Component Data
When you host a component, you can control the overlay through ToppyOverlay
service. Using this service you can access all properties that is provided in content. Also the properties comes with close
.
this.overlay = this._toppy .positionposition .contentHelloComponent, .create; this.overlay.listen't_compins'.subscribe;
// host component
Template Data
This is very similar to above one. When you use template as a content, you can pass additional data to it.
this.overlay = this._toppy .positionposition .contenttemplate, .create;
Then in your template you can refer the data like this,
Hello ! Close
Method close
is automatically binded.
Plain text
When you use Plain text as a content, optionally you can able to set a class name to that div
block.
this.overlay = this._toppy .positionposition .content'some content', .create;
API
/* Toppy */ Toppy.positionposition: ToppyPosition:Toppy Toppy.configconfig: ToppyConfig:Toppy Toppy.contentdata: ContentData, props: ContentProps = :Toppy Toppy.createkey: string = '':ToppyControl Toppy.getCtrlid: string:ToppyControl Toppy.destroy:void
/* ToppyControl */ ToppyControl.open:void ToppyControl.close:void ToppyControl.toggle:void ToppyControl.onDocumentClick:Observable<any> ToppyControl.onWindowResize:Observable<any> ToppyControl.changePositionnewPosition: ToppyPosition: void ToppyControl.updateContentcontent: ContentData, props: ContentProps = :void ToppyControl.updatePositionconfig:object:ToppyControl ToppyControl.listeneventName:string:Observable<any>
/* events */ `t_open`, `t_close`, `t_dynpos`, `t_detach`, `t_posupdate`, `t_compins`;
Contribution
Any kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. :)
Credits
▶ Icons ━ icons8
▶ Illustrations ━ undraw
▶ Font icons ━ feathers
Issues
Found a bug? Have some idea? Or do you have questions? File it here
Licence
MIT