pop
v0.0.1arrow_drop_downBasic Usage
Wrap any component you want to display in a popover with an <hc-pop>
component.
<hc-pop>
<app-contact-overview [contact]="myContact"></app-contact-overview>
</hc-pop>
Next, hook the popover to an anchor element.
<button [hcPop]="contactPopover">
See Contact Details
</button>
<hc-pop #contactPopover>
<app-contact-overview [contact]="myContact"></app-contact-overview>
</hc-pop>
Focus behavior
By default, the popover will apply focus to the first tabbable element when opened and trap focus within the popover until closed. If the popover does not contain any focusable elements, focus will remain on the most recently focused element.
You can target a different element for initial focus using the cdkFocusInitial
attribute.
To prevent focus from automatically moving into the popover, you can set the autoFocus
property
to false
.
<hc-pop [autoFocus]="false">
</hc-pop>
Once the popover is closed, focus will return to the most recently focused element prior to
opening the popover. To disable this, you can set the restoreFocus
property to false
.
<hc-pop [restoreFocus]="false">
</hc-pop>
Alternatively the open
and openPopover
methods support an optional HcPopoverOpenOptions
object where autoFocus
and restoreFocus
options can be set while opening the popover. Note
that these options do no take precendence over the component inputs. For example, if restoreFocus
is set to false
either in the open options or via the component input, focus will not be
restored.
<button [hcPop]="myPopover" (click)="myPopover.open({ restoreFocus: false })">
Open
</button>
Styles
The <hc-pop>
component by default provides some basic styling, but these can be turned off with disableStyle
.
This allows for the popover to be used in some very customized and interesting ways. In the case that the basic styles
are disabled, it is the responsibility of the elements you project inside the popover to style themselves. This
includes background color, box shadows, margin offsets, etc.
Animations
Setup
If you want the popover animations to work, you must include BrowserAnimationsModule
in your app.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [ BrowserAnimationsModule ],
...
})
export class AppModule { }
If you prefer to not have animations, you can include NoopAnimationsModule
.
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [ NoopAnimationsModule ],
...
})
export class AppModule { }
Modifying Animations
By default, the opening and closing animations of a popover are quick with a simple easing curve.
You can modify these animation curves using openTransition
and closeTransition
. Or, you can disable animation
altogther by setting shouldAnimate
to false.
<hc-pop #mySlowPopover
openTransition="1000ms ease-out"
closeTransition="100ms ease-in">
</hc-pop>