Popover

Design Code

Popover Usage

Example 1

Click Me Radio 1 Radio 2 Radio 3 
<nile-popover title="I am title" placement="bottom">
<nile-button slot="anchor" variant="primary"> Click Me</nile-button>
     <nile-input placeholder="Please Enter User Email Id" label="Email Id"></nile-input>
     <nile-input placeholder="Please Enter User Name " label="Name"></nile-input>
    <nile-radio-group  label="Select an option" name="options" value="2">
      <nile-radio name="test" value="1" label="Radio 1">Radio 1 </nile-radio>
      <nile-radio name="test" value="2" label="Radio 2"> Radio 2</nile-radio>
      <nile-radio name="test" value="3" label="Radio 3" > Radio 3</nile-radio>
    </nile-radio-group>
</nile-popover>

Example 2

Click Me Radio 1 Radio 2 Radio 3 
<nile-popover title="I am title" placement="right">
<nile-button slot="anchor" variant="primary"> Click Me</nile-button>
     <nile-input placeholder="Please Enter User Email Id" label="Email Id"></nile-input>
     <nile-input placeholder="Please Enter User Name " label="Name"></nile-input>
    <nile-radio-group  label="Select an option" name="options" value="2">
      <nile-radio name="test" value="1" label="Radio 1">Radio 1 </nile-radio>
      <nile-radio name="test" value="2" label="Radio 2"> Radio 2</nile-radio>
      <nile-radio name="test" value="3" label="Radio 3" > Radio 3</nile-radio>
    </nile-radio-group>
</nile-popover>

Example 3

Click Me Radio 1 Radio 2 Radio 3 Submit 
<nile-popover title="I am title" placement="left">
<nile-button slot="anchor" variant="primary"> Click Me</nile-button>
     <nile-input placeholder="Please Enter User Email Id" label="Email Id"></nile-input>
     <nile-input placeholder="Please Enter User Name " label="Name"></nile-input>
    <nile-radio-group  label="Select an option" name="options" value="2">
      <nile-radio name="test" value="1" label="Radio 1">Radio 1 </nile-radio>
      <nile-radio name="test" value="2" label="Radio 2"> Radio 2</nile-radio>
      <nile-radio name="test" value="3" label="Radio 3" > Radio 3</nile-radio>
    </nile-radio-group>
<nile-button slot="action" variant="caution"> Submit</nile-button>
</nile-popover>

Example 4

Click Me Radio 1 Radio 2 Radio 3 Submit 
<nile-popover title="I am title" placement="bottom">
<nile-button slot="anchor" variant="primary"> Click Me</nile-button>
     <nile-input placeholder="Please Enter User Email Id" label="Email Id"></nile-input>
     <nile-input placeholder="Please Enter User Name " label="Name"></nile-input>
    <nile-radio-group  label="Select an option" name="options" value="2">
      <nile-radio name="test" value="1" label="Radio 1">Radio 1 </nile-radio>
      <nile-radio name="test" value="2" label="Radio 2"> Radio 2</nile-radio>
      <nile-radio name="test" value="3" label="Radio 3" > Radio 3</nile-radio>
    </nile-radio-group>
<nile-button slot="action" variant="caution"> Submit</nile-button>
</nile-popover>

Slots

Name Description
popover For the whole popover
(default) The Popover Content
title It gives a title to the nile-popover .
anchor The trigger Component which have a click popover event.
action A component in a footer of popover

Attributes & Properties

Name Description Type Default
title It gives a title to the nile-popover . string ''
distance The distance in pixels from which to offset the popover away from its target. Number 0
preventOverlayClose Enables/Disables the closure of popover on clicking outside the opened section Boolean false
open Control variable for popover to show nd hide. Boolean false
placement The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' 'top'
arrowPlacement For the placement of the arrow on popover. 'start' | 'end' | 'center' | 'anchor' 'anchor'

Events

Name Description Event Detail
nile-init Emitted when the component connects -
nile-destroy Emitted when the component disconnects. -
nile-show Emitted when the popover is opened. -
nile-hide Emitted when the component closed. -

Dependencies

This component automatically imports the following dependencies.

nile-popup

To be added