{% extends "templates/sink.nunjucks" %} {% block body %}

Popovers Sink

Popovers can have buttons, split buttions or links as the trigger element. Popover content can be any component.

All Popovers will close on Escape key press and on click of document body. Only one Popover will be open at a time.

Popover Default Empty Content

{{ luci.popover() }}

Popover heading and description

{{ luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."] ) }}

Popover heading, description and actions

{{ luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover heading, description and primary action only

{{ luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], action_button_text="Continue" ) }}

Popover heading, description and cancel action only

{{ luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel" ) }}

Popover heading, description, form field and actions

{% call luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue", trigger={ type: "button", props: { text: "Primary Button Trigger", class: "luci-button--primary luci-button--flat" } } ) %} {{ luci.form_input(input_type="text", placeholder="Enter an answer") }} {% endcall %}

Popover heading, description, 2 form fields and actions

{% call luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue", trigger={ type: "button", props: { text: "Primary Button Trigger", class: "luci-button--primary luci-button--flat" } } ) %} {{ luci.form_input(input_type="text", placeholder="Enter a name") }} {{ luci.form_input(input_type="text", placeholder="Enter an answer") }} {% endcall %}

Popover heading only

{{ luci.popover( heading="Popover Heading" ) }}

Popover description only

{{ luci.popover( description=["Popover text goes here and here and some text here and maybe just."], trigger={ type: "button", props: { text: "Flat Button Trigger", class: "luci-button--secondary luci-button--flat" } } ) }}

Popover heading and description (multiple paragraphs)

{{ luci.popover( heading="Popover Heading", description=[ "Popover text goes here and here and some text here and maybe just.", "Popover text goes here and here and some text here and maybe just." ], trigger={ type: "button", props: { class: "luci-button--icon-only luci-button--flat", icon_left: "add" } } ) }}

Popover Positions


Popover bottom, center (default)

{{ luci.popover( heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover bottom, offset right

{{ luci.popover( class="luci-popover--right", heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover bottom, offset left

{{ luci.popover( class="luci-popover--left", heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover top, center

{{ luci.popover( class="luci-popover--top", heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover top, offset right

{{ luci.popover( class="luci-popover--right luci-popover--top", heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}

Popover top, offset left

{{ luci.popover( class="luci-popover--left luci-popover--top", heading="Popover Heading", description=["Popover text goes here and here and some text here and maybe just."], cancel_button_text="Cancel", action_button_text="Continue" ) }}
{% endblock body %}