ダイアログ

API Reference

ファイルを開いたり保存したりするためのネイティブシステムダイアログと、メッセージダイアログ。

サポートされているプラットフォーム

This plugin requires a Rust version of at least 1.77.2

Platform	Level	Notes
windows
linux
macos
android		Does not support folder picker
ios		Does not support folder picker

セットアップ

ダイアログプラグインをインストールして開始します。

自動
手動

プロジェクトのパッケージマネージャーを使用して依存関係を追加します。

npm run tauri add dialog

yarn run tauri add dialog

pnpm tauri add dialog

deno task tauri add dialog

bun tauri add dialog

cargo tauri add dialog

src-tauri フォルダで次のコマンドを実行して、Cargo.toml のプロジェクトの依存関係にプラグインを追加します。
```
cargo add tauri-plugin-dialog
```

lib.rs を変更してプラグインを初期化します。

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

JavaScript でダイアログを作成したい場合は、npm パッケージもインストールします。

npm install @tauri-apps/plugin-dialog

yarn add @tauri-apps/plugin-dialog

pnpm add @tauri-apps/plugin-dialog

deno add npm:@tauri-apps/plugin-dialog

bun add @tauri-apps/plugin-dialog

使用法

ダイアログプラグインは、JavaScript と Rust の両方で使用できます。使用方法は次のとおりです。

JavaScript:

Yes/No ダイアログの作成
Ok/Cancel ダイアログの作成
メッセージダイアログの作成
ファイル選択ダイアログを開く
ファイル保存ダイアログ

Rust:

質問ダイアログの構築
メッセージダイアログの構築
ファイル選択ダイアログの構築

JavaScript

JavaScript API リファレンスですべてのダイアログオプションを参照してください。

Yes/No ダイアログの作成

Yes と No ボタンを持つ質問ダイアログを表示します。

import { ask } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合、以下を使用できます
// const { ask } = window.__TAURI__.dialog;

// Yes/No ダイアログを作成
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  kind: 'warning',
});

console.log(answer);
// コンソールにブール値を出力します

Ok/Cancel ダイアログの作成

Ok と Cancel ボタンを持つ質問ダイアログを表示します。

import { confirm } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合、以下を使用できます
// const { confirm } = window.__TAURI__.dialog;

// 確認用 Ok/Cancel ダイアログを作成
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', kind: 'warning' }
);

console.log(confirmation);
// コンソールにブール値を出力します

メッセージダイアログの作成

Ok ボタンを持つメッセージダイアログを表示します。ユーザーがダイアログを閉じると false が返されることに注意してください。

import { message } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合、以下を使用できます
// const { message } = window.__TAURI__.dialog;

// メッセージを表示
await message('File not found', { title: 'Tauri', kind: 'error' });

ファイル選択ダイアログを開く

ファイル/ディレクトリ選択ダイアログを開きます。

multiple オプションはダイアログが複数選択を許可するかどうかを制御し、directory はディレクトリ選択かどうかを制御します。

import { open } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合、以下を使用できます
// const { open } = window.__TAURI__.dialog;

// ダイアログを開く
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// ファイルパスまたは URI を出力します

ファイル保存ダイアログ

ファイル/ディレクトリ保存ダイアログを開きます。

import { save } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合、以下を使用できます
// const { save } = window.__TAURI__.dialog;

// 拡張子 .png または .jpeg で 'My Filter' を保存するように促します
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// 選択されたパスを出力します

Rust

利用可能なすべてのオプションについては、Rust API リファレンスを参照してください。

質問ダイアログの構築

Absolutely と Totally ボタンを持つ質問ダイアログを表示します。

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

let answer = app.dialog()
        .message("Tauri is Awesome")
        .title("Tauri is Awesome")
        .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
        .blocking_show();

非ブロッキング操作が必要な場合は、代わりに show() を使用できます。

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

app.dialog()
    .message("Tauri is Awesome")
    .title("Tauri is Awesome")
   .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
    .show(|result| match result {
        true => // 何かをする,
        false =>// 何かをする,
    });

メッセージダイアログの構築

Ok ボタンを持つメッセージダイアログを表示します。ユーザーがダイアログを閉じると false が返されることに注意してください。

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

let ans = app.dialog()
    .message("File not found")
    .kind(MessageDialogKind::Error)
    .title("Warning")
    .blocking_show();

非ブロッキング操作が必要な場合は、代わりに show() を使用できます。

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};

app.dialog()
    .message("Tauri is Awesome")
    .kind(MessageDialogKind::Info)
    .title("Information")
    .buttons(MessageDialogButtons::OkCustom("Absolutely"))
    .show(|result| match result {
        true => // 何かをする,
        false => // 何かをする,
    });

ファイル選択ダイアログの構築

ファイルを選択

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();
// file_path `Option` を返すか、ユーザーがダイアログを閉じた場合は `None` を返します

非ブロッキング操作が必要な場合は、代わりに pick_file() を使用できます。

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // file_path `Option` を返すか、ユーザーがダイアログを閉じた場合は `None` を返します
    })

ファイルを保存

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // ここでオプションのファイルパスを使って何かをする
    // ユーザーがダイアログを閉じた場合、ファイルパスは `None` です

または、代替として：

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // file_path `Option` を返すか、ユーザーがダイアログを閉じた場合は `None` を返します
    });

Default Permission

This permission set configures the types of dialogs available from the dialog plugin.

Granted Permissions

All dialog types are enabled.

This default permission set includes the following:

allow-ask
allow-confirm
allow-message
allow-save
allow-open

Permission Table

Identifier	Description
`dialog:allow-ask`	Enables the ask command without any pre-configured scope.
`dialog:deny-ask`	Denies the ask command without any pre-configured scope.
`dialog:allow-confirm`	Enables the confirm command without any pre-configured scope.
`dialog:deny-confirm`	Denies the confirm command without any pre-configured scope.
`dialog:allow-message`	Enables the message command without any pre-configured scope.
`dialog:deny-message`	Denies the message command without any pre-configured scope.
`dialog:allow-open`	Enables the open command without any pre-configured scope.
`dialog:deny-open`	Denies the open command without any pre-configured scope.
`dialog:allow-save`	Enables the save command without any pre-configured scope.
`dialog:deny-save`	Denies the save command without any pre-configured scope.

Support on Open Collective Sponsor on GitHub