popover.md

< Back to Components List

Popover

polaris-popover implements the Polaris Popover component. This component uses ember-basic-dropdown to implement popover functionality. Note that the usage is slightly different from the React implementation so please pay attention to the examples below.

NOTE: the active, activatorWrapper, and preventAutofocus properties are currently unimplemented.

Examples

Basic usage:

{{#polaris-popover as |popover|}}
  {{#popover.activator}}
    {{polaris-button text="Toggle popover"}}
  {{/popover.activator}}

  {{#popover.content}}
    This is the popover content
  {{/popover.content}}
{{/polaris-popover}}

Sectioned popover with onClose action:

{{#polaris-popover
  sectioned=true
  onClose=(action "myCloseAction")
  as |popover|
}}
  {{#popover.activator}}
    {{polaris-button text="Toggle popover"}}
  {{/popover.activator}}

  {{#popover.content}}
    This is the popover content
  {{/popover.content}}
{{/polaris-popover}}