TauriのDialogを試してみる

타우리 다이얼로그 API

Tauri로Dialogは以下の５種類を提供している

ask

confirm

message

open

save

사용하다 src-tauri/tauri.config.json 의 allowlistに機能を許可する設定が必要.

질문 대화

"예", "아니요"ボタンがあるDialog

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "ask": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

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

대화 확인

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

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "confirm": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

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

메시지 대화상자

"OK"BotanのみあるDialog

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "message": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

await dialog.message('This is a message dialog.');

대화 열기

파일やDirectory를 실행하는 대화 상자

OpenDialogOptions

https://tauri.studio/docs/api/js/interfaces/dialog.opendialogoptions/

色んな옵션 があり、File選択なのかDirectory選択なのか、複数選択可能なのかやFilter등이 設定できる.

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "open": true
      }
    }
  }
}

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
  ...
}

저장 대화상자

File保存先を選択するDialog

SaveDialogOptions

https://tauri.studio/docs/api/js/interfaces/dialog.savedialogoptions/

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "save": true
      }
    }
  }
}

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
  ...
}

데모 리포지토리 및 환경

저장소 : https://github.com/dannygim/tauri-demo/tree/main/dialog-demo

타우리 정보

% 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

Reference

이 문제에 관하여(TauriのDialogを試してみる), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dannygim/taurinodialogwoshi-sitemiru-572d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다