Drawer ドロワー

画面の端からスライドして現れるオーバーレイです。詳細やフィルタといった二次的な操作に適しています。四つの方向、制御可能なサイズとオーバーレイの挙動を備えます。

ドロワー

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right 右側</LhButton>
      <LhButton @click="open('left')">left 左側</LhButton>
      <LhButton @click="open('top')">top 上部</LhButton>
      <LhButton @click="open('bottom')">bottom 下部</LhButton>
      <LhButton @click="openNoMask">オーバーレイで閉じない</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction が方向を、size がサイズ（数値は px、またはパーセンテージ文字列）を制御します。</p>
      <p class="demo-note">下部のボタンで lockScroll / closeOnEsc などの組み合わせをトリガーできます。</p>
      <template #footer>
        <LhButton @click="visible = false">キャンセル</LhButton>
        <LhButton type="primary" @click="visible = false">保存</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="オーバーレイをクリックしても閉じない"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false、closeOnEsc=false で、ボタンまたはクローズアイコンを押すしかありません。</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">閉じる</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: '右側ドロワー',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `${dir} ドロワー`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	表示するかどうか（制御される modelValue prop）	boolean	false
title	タイトル	string	—
direction	方向	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	サイズ：数値は px。文字列はパーセンテージをサポート	string \| number	—
maskClosable	オーバーレイのクリックで閉じるかどうか	boolean	true
showClose	クローズボタンを表示するかどうか	boolean	true
teleportTarget	ポップアップレイヤーのマウント先（セレクタまたは要素。デフォルトは body。2.7 には Teleport がなく、host の移動で実現）	string \| HTMLElement	—
lockScroll	ページのスクロールをロックするかどうか	boolean	true
closeOnEsc	Esc でのクローズに応答するかどうか	boolean	true
themeVars	コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き	Record<string, string>	—
bgPattern	コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き	string	—
sx	sx によるレイアウト省略記法（パネルに作用）	—	—

Slots

スロット	説明
header	タイトルエリア（デフォルトは title prop）
default	ドロワーの本文
footer	下部のボタンエリア