## Drawer 例えば、巨大なフォームを持っていたり、`terms & conditions` のようなものを表示するためのスペースが必要な場合、`Drawer` は `Dialog` とほぼ同じ API を持っていますが、ユーザーエクスペリエンスが異なります。 ### 基本的な使い方 一時的にDrawerを多方向から呼び出す :::demo `Drawer` には `Dialog` のように `model-value` を設定して `Drawer` 自体の表示を制御する必要があります。`title` は名前付きスロットで、タイトルは `title` という属性を使って設定することもできます。デフォルトでは、`Drawer`はブラウザウィンドウの**30%**の大きさの**右隅から**左隅に向かって展開します。このデフォルトの動作を変更するには、`direction` と `size` 属性を設定します。このショーケースでは `before-close` API の使い方も紹介しました。さらに詳しく知りたい場合は Attributesセクションもご覧ください。 ```html left to right right to left top to bottom bottom to top open Hi, there! ``` ::: ### タイトルなし タイトルが不要になったら、引き出しからタイトルを外すことができます。 :::demo withHeader`属性を**false**に設定すると、タイトルを削除することができます。アクセスしやすいようにしたい場合は、`title`属性を設定してください。 ```html open Hi there! ``` ::: ### カスタマイズコンテンツ ダイアログと同様に、`Drawer`はあなたが望むように多くの多様なインタラクションを行うことができる。 :::demo ```html Open Drawer with nested table Open Drawer with nested form
``` ::: ### 入れ子にしたDrawer `Dialog` のように `Drawer` を複数のレイヤーで構成することもできる。 :::demo 異なるレイヤーに複数のDrawerが必要な場合は、`append-to-body` 属性を **true** に設定しなければなりません。 ```html open
Click me!

_(:зゝ∠)_

``` ::: :::tip Drawer内のコンテンツは遅延レンダリングされるべきであり、これはDrawer内のコンテンツが初期レンダリングのパフォーマンスに影響を与えないことを意味します。したがって、DOM の操作は `ref` を介して行うか、`open` イベントが発生した後に行うべきである。 ::: :::tip Drawerは `destroyOnClose` というAPIを提供しています。これはフラグ変数であり、Drawerが閉じられた後にDrawer内の子コンテンツを破棄することを示します。Drawerが開くたびに `mounted` ライフサイクルを呼び出す必要がある場合にこのAPIを利用することができます。 ::: ### Drawer属性 | Parameter| Description | Type | Acceptable Values | Defaults | |---------- |-------------- |---------- |-------------------------------- |-------- | | append-to-body | DrawerがDocumentBody要素に挿入されている場合のコントロールは、ネストされたDrawerはこのパラメータを**true**に割り当てなければなりません。| boolean | — | false | | before-close | 設定されている場合は、終了処理を停止します。 | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — | | close-on-press-escape | ESC を押してDrawerを閉じることができるかどうかを示す。 | boolean | — | true | | custom-class | Drawerの追加クラス名 | string | — | — | | destroy-on-close | Drawerが閉じた後にChildrenが破壊されるべきかどうかを示す | boolean | - | false | | modal | シャドウイングレイヤーを表示するか | boolean | — | true | | modal-append-to-body | シャドウイングレイヤーをDocumentBody要素に挿入するかどうかを示す。 | boolean | — | true | | direction | Drawerの開き方向 | Direction | rtl / ltr / ttb / btt | rtl | | show-close | Drawerの右上に閉じるボタンを表示するようにした | boolean | — | true | | size | Drawerのサイズ, ドローワが水平モードの場合は幅プロパティ, そうでない場合は高さプロパティ, サイズが `number` 型の場合はピクセル単位でサイズを記述します; サイズが `string` 型の場合は `x%` 記法を用います, それ以外の場合はピクセル単位で解釈されます | number / string | - | '30%' | | title | Drawerのタイトルは、スロットの名前を指定して設定することもできます。 | string | — | — | | model-value | Drawerを表示する場合は、`.sync` 記法もサポートします。 | boolean | — | false | | wrapperClosable | シャドウイングレイヤーをクリックしてDrwerを閉じることができるかどうかを示します。 | boolean | - | true | | withHeader | デフォルトは true で、withHeader が false に設定されている場合は `title attribute` と `title slot` の両方が動作しません。 | boolean | - | true | ### Drawerスロット | Name | Description | |------|--------| | — | Drawerの内容 | | title | Drawerタイトルセクション | ### Drawerメソッド | Name | Description | | ---- | --- | | closeDrawer | Drawerを閉じるには、このメソッドは `before-close` を呼び出す。 | ### Drawerイベント | Event Name | Description | Parameter | |---------- |-------- |---------- | | open | Drawerのオープニングアニメーションが始まる前にトリガーされます。 | — | | opened | Drawerのオープニングアニメーションが終わった後にトリガーされます。 | — | | close | Drawerのクロージングアニメーションが始まる前にトリガーされます。 | — | | closed | Drawerのクロージングアニメーションが終わった後にトリガーされます。 | — |