Skip to content

Latest commit

 

History

History
405 lines (357 loc) · 16 KB

popover.md

File metadata and controls

405 lines (357 loc) · 16 KB
Raw

Popover

Popovers are useful for conveying information when an user clicks or hovers an element.{.lead}

Example

Wrap both the popover's trigger element (such as an <i-button>) and the <template slot="body"> inside a <i-popover> component. Optionally, you can provide a popover header and footer using slot="header" and slot="footer".

Popover Popover Header This is the popover body. Useful information goes here. Popover Footer 
<i-popover>
    <i-button>Popover</i-button>
    <template slot="header">Popover Header</template>
    <template slot="body">This is the popover body. Useful information goes here.</template>
    <template slot="footer">Popover Footer</template>
</i-popover>

Placement

Trigger popovers at the top, bottom, left or right of elements by adding the placement property to the <i-popover> element.

Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the popover to the start or end of the placement instead of centering it.

Top Popover This is the popover body. Useful information goes here.   Bottom Popover This is the popover body. Useful information goes here.   Left Popover This is the popover body. Useful information goes here.   Right Popover This is the popover body. Useful information goes here. 
<i-popover placement="top">
    <i-button>Top Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>

<i-popover placement="bottom">
    <i-button>Bottom Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover placement="left">
    <i-button>Left Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover placement="right">
    <i-button>Right Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>

Trigger type

You can use the trigger property to trigger the popover on hover or click. By default, popovers are triggered on click, a design decision made to improve user experience.

Click Popover This is the popover body. Useful information goes here.   Hover Popover This is the popover body. Useful information goes here.   Focus Popover This is the popover body. Useful information goes here.   Multiple Events Popover This is the popover body. Useful information goes here.   Manual Popover This is the popover body. Useful information goes here.   
<i-popover trigger="click">
    <i-button>Click Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover trigger="hover">
    <i-button>Hover Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover trigger="focus">
    <i-button>Focus Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover :trigger="['focus', 'hover']">
    <i-button>Multiple Events Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>&nbsp;
<i-popover trigger="manual" v-model="visible">
    <i-button @click="visible = !visible">Manual Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>

Sizes

You're able to use the size modifier to control the size of your popovers, using one of the available sizes: sm, md, and lg. The default size is set to md.

Small Popover This is the popover body. Useful information goes here.   Medium Popover This is the popover body. Useful information goes here.   Large Popover This is the popover body. Useful information goes here. 
<i-popover size="sm">
    <i-button>Small Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover size="md">
    <i-button>Medium Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>
<i-popover size="lg">
    <i-button>Large Popover</i-button>
    <template slot="body">This is the popover body. Useful information goes here.</template>
</i-popover>

Variants

Inkline includes two predefined popover styles, each serving its own semantic purpose. You can set the style of a <i-popover> using the variant property, which can have a value of light or dark. By default, popovers use the light variant.

Light Popover Popover Header This is the popover body. Useful information goes here. Popover Footer   Dark Popover Popover Header This is the popover body. Useful information goes here. Popover Footer 
<i-popover variant="light">
    <i-button variant="light">Light Popover</i-button>
    <template slot="header">Popover Header</template>
    <template slot="body">This is the popover body. Useful information goes here.</template>
    <template slot="footer">Popover Footer</template>
</i-popover>
<i-popover variant="dark">
    <i-button variant="dark">Dark Popover</i-button>
    <template slot="header">Popover Header</template>
    <template slot="body">This is the popover body. Useful information goes here.</template>
    <template slot="footer">Popover Footer</template>
</i-popover>

Component API

Here you can find a list of the various customization options you can use for the popover component as props, as well as available slots and events.

arrow Sets whether to attach an arrow to the popover. Boolean true, false true disabled Sets the popover state as disabled. Boolean true, false false id Sets the identifier of the popover. String popover-<uid> placement Sets the placement of the popover. String top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end top popper-options Sets custom options for the Popper.js plugin. Object trigger Sets the trigger event of the popover. String click, hover click transformOrigin Sets the transform origin of the popover. Boolean, String true variant Sets the color variant of the popover. String light, dark light default Slot for popover component trigger. header Slot for popover component header. body Slot for popover component body. footer Slot for popover component footer. change Emitted when visibility changes. (visible: Boolean) => {}

Sass Variables

Here you can find a list of the Sass variables you can use for the popover components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$popover-font-size $font-size $popover-font-weight $font-weight-normal $popover-line-height $line-height $popover-margin spacers('1/2') $popover-width 280px $popover-border-width $border-width $popover-border-radius $border-radius $popover-padding-base spacers('2/3') $spacer $popover-padding size-map($popover-padding-base, $sizes, $size-multipliers) $popover-variants ('monochrome-white')