現在のページの状態を保持したまま、ユーザーに情報を提供します。 ### 基本的な使い方 dialog はdialogボックスをポップアップ表示します。 :::demo `visible` 属性に `Boolean` を設定し、それが `true` のときにdialogを表示します。dialogは `body` と `footer` の2つの部分からなり、後者は `footer` という名前の `スロット` を必要とします。オプションの `title` 属性 (デフォルトでは空) はタイトルを定義するためのものです。最後に、この例では `before-close` がどのように使われるかを示します。 ```html click to open the Dialog This is a message ``` ::: :::tip `before-close` はユーザが閉じるアイコンか背景をクリックしたときにのみ動作します。footerer` という名前のスロットにdialogを閉じるボタンがある場合、ボタンのクリックイベントハンドラに `before-close` と同じように `before-close` を追加することができます。 ::: ### カスタマイズ dialog の内容は何でも構いません、テーブルやフォームであっても構いません。この例では、要素テーブルとフォームを dialog で使う方法を示しています。 :::demo ```html open a Table nested Dialog open a Form nested Dialog Cancel Confirm ``` ::: ### ネストされたdialog あるdialogが他のdialogにネストになっている場合は `append-to-body` が必要です。 :::demo 通常、ネストになったdialogを使うことはお勧めしません。複数のdialogをページ上でレンダリングしたい場合は、単にそれらをフラットにして隣接することができます。dialogを別のdialogの中に入れ子にしなければならない場合は、入れ子にしたdialogの `append-to-body` を true に設定すると、親ノードではなくボディに追加され、両方のdialogが正しくレンダリングされます。 ```html ``` ::: ### 中央揃えコンテンツ dialogの内容を中央揃えにすることができます。 :::demo `center` を `true` に設定すると、dialogのヘッダとフッタを水平方向に中央揃えにします。`center`はDialogのヘッダとフッタにのみ影響します。dialogのボディは何でもいいので、中央揃えにすると見栄えが悪くなることがあります。ボディも中央揃えにしたい場合は、CSSを書く必要があります。 ```html Click to open the Dialog It should be noted that the content will not be aligned in center by default Cancel Confirm ``` ::: :::tip dialogの内容は遅延的にレンダリングされます。つまり、デフォルトのスロットは最初に開かれるまで DOM にレンダリングされません。したがって、DOM の操作を行ったり `ref` を使ってコンポーネントにアクセスする必要がある場合は、`open` イベントコールバックで行います。 ::: :::tip Vuexストアで `visible` にバインドされた変数を管理している場合、`.sync` が正しく動作しません。この場合は、`.sync` モディファイアを削除し、Dialog の `open`, `close` イベントをリッスンし、Vuex のミューテーションをコミットして、イベントハンドラでその変数の値を更新してください。 ::: ### 属性 | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | visible | dialogの可視性、.sync 修飾子をサポートしています。 | boolean | — | false | | title | dialogのタイトルを指定します。名前付きスロットで渡すこともできます (次のテーブルを参照してください)。 | string | — | — | | width | dialogの幅 | string | — | 50% | | fullscreen | dialogが全画面を占めるかどうか | boolean | — | false | | top | dialogCSSの `margin-top` の値 | string | — | 15vh | | modal | マスクが表示されているかどうか | boolean | — | true | | modal-append-to-body | モーダルを ボディ要素に追加するかどうかを指定します。false の場合、モーダルはdialogの親要素に追加されます。 | boolean | — | true | | append-to-body | dialog自身をボディに追加するかどうかを指定します。入れ子になったdialogは、この属性を `true` に設定しなければなりません。 | boolean | — | false | | lock-scroll | dialog表示中にボディのスクロールを無効にするかどうか | boolean | — | true | | custom-class | dialog用のカスタムクラス名 | string | — | — | | close-on-click-modal | マスクをクリックしてdialogを閉じることができるかどうか | boolean | — | true | | close-on-press-escape | ESC を押してdialogを閉じることができるかどうか | boolean | — | true | | show-close | 閉じるボタンを表示するかどうか | boolean | — | true | | before-close | コールバックを使用することで、dialogが閉じるのを防ぐことができます。 | function(done),done is used to close the Dialog | — | — | | center | ヘッダーとフッターを中央に配置するかどうか | boolean | — | false | | destroy-on-close | dialogを閉じたときにdialog内の要素を破棄する | boolean | — | false | ### スロット | Name | Description | |------|--------| | — | dialogの内容 | | title | dialogタイトルの内容 | | footer | dialogフッターの内容 | ### イベント | Event Name | Description | Parameters | |---------- |-------- |---------- | | open | dialogが開いたときにトリガーされます。 | — | | opened | dialogのオープニングアニメーションが終了したときにトリガーされます。 | — | | close | dialogが閉じたときにトリガーされます。 | — | | closed | dialog終了アニメーションの終了時にトリガーされます。 | — |