element-plus/assets/en-US_component_popover.md.fad5f644.js

2 lines
90 KiB
JavaScript
Raw Normal View History

2022-05-23 21:22:01 +08:00
import{_ as c,a as l,b as u,c as i,d as r}from"./chunks/virtual-triggering.33a30a7e.js";import{_ as D}from"./chunks/contributors.a7a66df9.js";import{c as F,a as s,w as e,u as o,b as a,d as n,e as E,r as k,o as d}from"./app.f4abc348.js";const A=a("h1",{id:"popover",tabindex:"-1"},[n("Popover "),a("a",{class:"header-anchor",href:"#popover","aria-hidden":"true"},"#")],-1),g=a("h2",{id:"basic-usage",tabindex:"-1"},[n("Basic usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),m=a("p",null,[n("Similar to Tooltip, Popover is also built with "),a("code",null,"ElPopper"),n(". So for some duplicated attributes, please refer to the documentation of Tooltip.")],-1),v=a("p",null,"popover/basic-usage",-1),h=E('<h2 id="virtual-triggering" tabindex="-1">Virtual triggering <a class="header-anchor" href="#virtual-triggering" aria-hidden="true">#</a></h2><p>Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering element and the content element, you should definitely use the mechanism, normally we use <code>#reference</code> to place our triggering element, with <code>triggering-element</code> API you can set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts <code>mouse</code> and <code>keyboard</code> event.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>v-popover</code> is about to be deprecated, please use <code>virtual-ref</code> as alternative.</p></div>',3),b=a("p",null,"popover/virtual-triggering",-1),f=a("h2",{id:"rich-content",tabindex:"-1"},[n("Rich content "),a("a",{class:"header-anchor",href:"#rich-content","aria-hidden":"true"},"#")],-1),B=a("p",null,"Other components/elements can be nested in popover. Following is an example of nested table.",-1),y=a("p",null,"popover/nested-information",-1),_=a("h2",{id:"nested-operation",tabindex:"-1"},[n("Nested operation "),a("a",{class:"header-anchor",href:"#nested-operation","aria-hidden":"true"},"#")],-1),w=a("p",null,"Of course, you can nest other operations. It's more light-weight than using a dialog.",-1),q=a("p",null,"popover/nested-operation",-1),x=a("h2",{id:"directive",tabindex:"-1"},[n("Directive "),a("a",{class:"header-anchor",href:"#directive","aria-hidden":"true"},"#")],-1),R=a("p",null,[n("You can still using popover in directive way but this is "),a("strong",null,"not recommended"),n(" anymore since this makes your application complicated, you may refer to the virtual triggering for more information.")],-1),T=a("p",null,"popover/directive-usage",-1),S=E('<h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>trigger</td><td>how the popover is triggered</td><td>string</td><td>click/focus/hover/contextmenu</td><td>click</td></tr><tr><td>title</td><td>popover title</td><td>string</td><td>\u2014</td><td>\u2014</td></tr><tr><td>effect</td><td>Tooltip theme, built-in theme: <code>dark</code> / <code>light</code></td><td>string</td><td>string</td><td>dark</td></tr><tr><td>content</td><td>popover content, can be replaced with a default <code>slot</code></td><td>string</td><td>\u2014</td><td>\u2014</td></tr><tr><td>width</td><td>popover width</td><td>string / number</td><td>\u2014</td><td>Min width 150px</td></tr><tr><td>placement</td><td>popover placement</td><td>string</td><td>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</td><td>bottom</td></tr><tr><td>disabled</td><td>whether Popover is disabled</td><td>boolean</td><td>\u2014</td><td>false</td></tr><tr><td>visible / v-model:visible</td><td>whether popover is visible</td><td>Boolean</td><td>\u2014</td><td>false</td></tr><tr><td>offset</td><td>popover offset</td><td>number</td><td>\u2014</td><td>0</td></tr><tr><td>transition</td><td>popover transition animation</td><td>string</td>