Popover ポップオーバー

クリック / ホバーでトリガーされる情報オーバーレイです。12 方位、四つのトリガー方式、矢印と幅のカスタマイズを備えます。

ポップオーバー

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="タイトル" content="click でトリガー（デフォルト）" placement="top">
        <LhButton>click 上部</LhButton>
      </LhPopover>
      <LhPopover content="click でトリガー" placement="right" trigger="click">
        <LhButton>click 右側</LhButton>
      </LhPopover>
      <LhPopover content="focus でトリガー" placement="bottom" trigger="focus">
        <LhButton>focus 下部</LhButton>
      </LhPopover>
      <LhPopover content="矢印なし + カスタム幅" placement="left" :arrow="false" :width="240">
        <LhButton>矢印なし 左側</LhButton>
      </LhPopover>
      <LhPopover content="厳密に left で配置" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">manual は :visible.sync と組み合わせて手動制御。disabled でポップアップを無効化。popperClass でカスタムクラス名。</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="ボタンのトグルで制御" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">manual トグル（{{ manual ? '開' : '閉' }}）</LhButton>
      </LhPopover>
      <LhPopover content="無効状態" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="遅延して表示 / 非表示" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
placement	表示位置	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	主軸方向のスペースが不足したときに方向を反転するかどうか（デフォルトは有効）。false を設定すると厳密に placement で配置し、ビューポートからのはみ出しを許容	boolean	true
trigger	トリガー方式	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	タイトル	string	—
visible	手動制御の表示状態（:visible.sync）	boolean	—
disabled	無効にするかどうか	boolean	false
arrow	矢印を表示するかどうか	boolean	true
width	ポップアップレイヤーの幅	string \| number	—
popperClass	ポップアップレイヤーのカスタムクラス名	string	—
teleportTarget	ポップアップレイヤーのマウント先（セレクタまたは要素。デフォルトは body。2.7 には Teleport がなく、host の移動で実現）	string \| HTMLElement	—
showAfter	遅延表示時間（ms）	number	—
hideAfter	遅延非表示時間（ms）	number	—
themeVars	コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き	Record<string, string>	—
bgPattern	コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き	string	—
sx	sx によるレイアウト省略記法（トリガーのルート要素に作用）	—	—

Slots

スロット	説明
default	トリガー
title	タイトルエリア（デフォルトは title prop）
content	ポップオーバーの本文（渡さないときは content prop）