Drawer 抽屜

貼邊面板，用來放篩選、詳情與設定。遮罩語言與對話框相同：40% 黑、遮罩 z-index 3990、面板 4000。開啟時鎖定頁面捲動並困住焦點。

範例

右側

預設 placement 是 right。width 預設 400。

開啟右側

側欄內容在 body 內捲動。

<gk-drawer :open="open" title="詳情" placement="right"></gk-drawer>

左側

placement="left"。視窗 ≤640px 時，左右抽屜寬度為 calc(100% - 48px)。

開啟左側

較窄的導覽面板。

<gk-drawer placement="left" title="導覽" :open="open"></gk-drawer>

頂部

頂部維持較矮的高度，讓下方內容仍被暗示。height 預設 40vh。

開啟頂部

較短的橫幅抽屜。

<gk-drawer placement="top" height="32vh" title="通知" :open="open"></gk-drawer>

底部

底部使用較大的上圓角，與小螢幕日期選擇的底部表單同一語彙。

開啟底部

底部表單內容。

<gk-drawer placement="bottom" title="底部" :open="open"></gk-drawer>

含頁尾

footer slot 使用與對話框相同、靠右的動作列。

篩選

選擇要留下的項目。

重設套用

<gk-drawer :open="open" title="篩選"><gk-button slot="footer">套用</gk-button></gk-drawer>

表單篩選

內容可捲動。欄位沿用 Input 的 34px 高度。

開啟篩選

<gk-drawer :open="open" title="篩選"><gk-input placeholder="關鍵字"></gk-input></gk-drawer>

無遮罩

show-mask="false" 不畫遮罩，並將 aria-modal 設為 false。closable 時 Esc 仍可關閉。

預覽

面板後面沒有暗色遮罩。

<gk-drawer show-mask="false" :open="open" title="預覽"></gk-drawer>

Alpine

<div x-data="{ open: false }">
  <gk-button type="button" x-on:click="open = true">篩選</gk-button>
  <gk-drawer title="篩選" x-bind:open="open" x-on:update:open="open = $event.detail">
    <p>貼邊面板</p>
  </gk-drawer>
</div>

API

屬性

屬性	型別	預設
open	boolean	false
title	string	''
placement	'left' | 'right' | 'top' | 'bottom'	'right'
width	number | string	400
height	number | string	40vh
closable	boolean	true
mask-closable	boolean	true
show-mask	boolean	true

width 用於左右，height 用於上下。純數字視為像素。

Slots

名稱	說明
default	內容
header	額外標頭
footer	動作

事件

名稱	內容
update:open	關閉時為 false
close	被關閉

CSS parts

mask、panel、header、title、close、body、footer。

面板以 180ms、自邊緣 12px 的位移進入。它與對話框共用阻擋堆疊，後開啟的對話框或抽屜會再高 10 階 z-index。