DEV Community

Danny Gim
Danny Gim

Posted on

TauriのDialogを試してみる

Tauri Dialog API

TauriでDialogは以下の5種類を提供している

使いたい機能は src-tauri/tauri.config.jsonallowlist に機能を許可する設定が必要。

Ask Dialog

"Yes", "No" ボタンがあるDialog
Ask Dialog

  • src-tauri/tauri.conf.jsonに機能許可
{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "ask": true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • main.ts
import { dialog } from "@tauri-apps/api";

const result = await dialog.ask('Are you sure?', 'Ask Dialog');
if (result) { // yes
  ...
} else { // no
  ...
}
Enter fullscreen mode Exit fullscreen mode

Confirm Dialog

Ask Dialogとほぼ同じだが、ボタンが”OK","Cancel"になっているのが異なる。
Confirm Dialog

  • src-tauri/tauri.conf.jsonに機能許可
{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "confirm": true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • main.ts
import { dialog } from "@tauri-apps/api";

const result = await dialog.confirm('Are you sure?', 'Confirm Dialog');
if (result) { // ok
  ...
} else { // cancel
  ...
}
Enter fullscreen mode Exit fullscreen mode

Message Dialog

"OK"ボタンのみあるDialog
Message Dialog

  • src-tauri/tauri.conf.jsonに機能許可
{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "message": true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • main.ts
import { dialog } from "@tauri-apps/api";

await dialog.message('This is a message dialog.');
Enter fullscreen mode Exit fullscreen mode

Open Dialog

FileやDirectory選択するDialog
Open Dialog

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "open": true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • main.ts
import { dialog } from "@tauri-apps/api";

const options: dialog.OpenDialogOptions = {
  filters: [
    {
      extensions: ["png", "jpeg"],
      name: "*",
    },
  ],
};

const result = await dialog.open(options);
if (Array.isArray(result)) { // string[]
  ...
} else if (result !== null) { // string
  ...
} else { // cancel
  ...
}
Enter fullscreen mode Exit fullscreen mode

Save Dialog

File保存先を選択するDialog
Save Dialog

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "save": true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • main.ts
import { dialog } from "@tauri-apps/api";

const options: dialog.SaveDialogOptions = {
  title: 'Save Dialog Demo'
};

const result = await dialog.save(options);
if (result) { // path
  ...
} else { // cancel
  ...
}
Enter fullscreen mode Exit fullscreen mode

Demo Repository & Environment

  1. Repository : https://github.com/dannygim/tauri-demo/tree/main/dialog-demo
  2. Tauri info
% npx tauri info

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 17.8.0
  › npm: 8.5.5
  › pnpm: Not installed!
  › yarn: Not installed!
  › rustup: Not installed!
  › rustc: 1.59.0
  › cargo: 1.59.0
  › Rust toolchain: 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.8)
  › @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.3)
  › tauri [RUST]: 1.0.0-rc.6,
  › tauri-build [RUST]: 1.0.0-rc.5,
  › tao [RUST]: 0.7.0,
  › wry [RUST]: 0.14.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../public
  › devPath: http://localhost:8080/
  › bundler: Rollup

App directory structure
  ├─ node_modules
  ├─ public
  ├─ src-tauri
  └─ src
Enter fullscreen mode Exit fullscreen mode

Top comments (0)