Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
logo icon

Syndron

ng-Components
ActionAnother actionSomething else here
Separated link

Basic popovers

HTML and bindings in popovers

Popovers can contain any arbitrary HTML, Angular bindings and even directives! Simply enclose desired content or title in a <ng-template> element.

Custom and manual triggers

You can easily override open and close triggers by specifying event names (separated by :) in the triggers property. You may pass multiple triggers; separate them with a space.

Alternatively you can take full manual control over popover opening / closing events.

Automatic closing with keyboard and mouse

As for some other popup-based widgets, you can set the popover to close automatically upon some events.

In the following examples, they will all close on Escape as well as:

  • click inside:
  • click outside:
  • all clicks:  

Context and manual triggers

You can optionally pass in a context when manually triggering a popover.

Open and close delays

When using non-manual triggers, you can control the delay to open and close the popover through the openDelay and closeDelay properties. Note that the autoClose feature does not use the close delay, it closes the popover immediately.

Popover visibility events

  • Popover is currently: closed
  • Last shown at:
  • Last hidden at:

Popover with custom class

You can optionally pass in a custom class via popoverClass

Copyright © 2021. All right reserved.

Theme Customizer
Theme Styles
Header Colors
Sidebar Backgrounds