3.1.1 • Published 3 years ago

@terminus/ui-popover v3.1.1

Weekly downloads
46
License
MIT
Repository
github
Last release
3 years ago

CI/CD Status Codecov MIT License
NPM version Library size

Popover component is designed to pop up simple or complex content based on a user trigger.

Table of Contents

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-popover

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

popper.js

This popover component is built on top of a 3rd party library called popper.js.

popper.js can be installed by running: yarn add @popperjs/core

popper.js documentation

Usage

Define a popover trigger and popover content:

<button [tsPopoverTrigger]="myPopper">Click me!</button>

<ts-popover #myPopper>
  <h1>My Title</h1>
  <p>Any HTML can be placed here!</p>
</ts-popover>

Position

Defines where the popover is positioned relative to current element:

<button
  [tsPopoverTrigger]="myPopper"
  [position]="top"
>Click me!</button>

<ts-popover #myPopper>My popover</ts-popover>

The default is bottom. For all available positions, please see the popper.js placement docs.

Popover trigger

Popover supports two types of trigger, click and hover.

<button
  [tsPopoverTrigger]="myPopper"
  popoverTrigger="click"
>Click me!</button>

<ts-popover #myPopper>My popover</ts-popover>

The default is click.

Hide on blur

By default, the popover will be closed by clicking outside the popover. If this is not desired, it can be disabled:

<button
  [tsPopoverTrigger]="myPopper"
  [hideOnBlur]="false"
>Click me!</button>

<ts-popover #myPopper>My popover</ts-popover>

It defaults to true.

Open on load

The popover can be defined to open on load:

<button
  [tsPopoverTrigger]="myPopper"
  [defaultOpened]="true"
>Click me!</button>

<ts-popover #myPopper>My popover</ts-popover>

It defaults to false.

Events

EventDescriptionPayload
popoverOnShownFired when popover shows uppopoverInstance
popoverOnHiddenFired when popover hidespopoverInstance
tslib@angular-devkit/schematics@schematics/angular
@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905@zalastax/nolb-_ter
3.1.1

3 years ago

3.1.0

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.9

4 years ago

2.1.8

4 years ago

2.1.6

4 years ago

2.1.7

4 years ago

2.1.5

4 years ago

2.1.4

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.3

4 years ago

2.1.0

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.1

4 years ago