Diálogo

GitHubnpmcrates.io

Referencia de API

Diálogos nativos del sistema para abrir y guardar archivos junto con diálogos de mensajes.

Plataformas Soportadas

Este plugin requiere una versión de Rust de al menos 1.77.2

Plataforma	Nivel	Notas
windows
linux
macos
android		No admite selector de carpetas
ios		No admite selector de carpetas

Configuración

Instala el plugin dialog para comenzar.

Automático

Usa el gestor de paquetes de tu proyecto para agregar la dependencia:

npm

npm run tauri add dialog

yarn

yarn run tauri add dialog

pnpm

pnpm tauri add dialog

deno

deno task tauri add dialog

bun

bun tauri add dialog

cargo

cargo tauri add dialog

Manual

1. Ejecuta el siguiente comando en la carpeta src-tauri para agregar el plugin a las dependencias del proyecto en Cargo.toml:

   cargo add tauri-plugin-dialog

2. Modifica lib.rs para inicializar el plugin:

   src-tauri/src/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");
   }

3. Si quieres crear diálogos en JavaScript, instala también el paquete npm:

   npm

   npm install @tauri-apps/plugin-dialog

   yarn

   yarn add @tauri-apps/plugin-dialog

   pnpm

   pnpm add @tauri-apps/plugin-dialog

   deno

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

   bun

   bun add @tauri-apps/plugin-dialog

Uso

El plugin dialog está disponible tanto en JavaScript como en Rust. Aquí te explicamos cómo puedes usarlo:

en JavaScript:

• Crear Diálogo Sí/No
• Crear Diálogo Aceptar/Cancelar
• Crear Diálogo de Mensaje
• Abrir un Diálogo de Selección de Archivos
• Diálogo Guardar en Archivo

en Rust:

• Construir un Diálogo de Pregunta
• Construir un Diálogo de Mensaje
• Construir un Diálogo de Selección de Archivos

Nota

Las APIs de diálogos de archivos devuelven rutas del sistema de archivos en Linux, Windows y macOS.

En iOS, se devuelven URIs file://<path>.

En Android, se devuelven content URIs.

El plugin filesystem funciona con cualquier formato de ruta desde el principio.

JavaScript

Consulta todas las Opciones de Diálogo en la referencia de la API de JavaScript.

Crear Diálogo Sí/No

Muestra un diálogo de pregunta con botones Yes y No.

import { ask } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { ask } = window.__TAURI__.dialog;

// Create a Yes/No dialog
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  kind: 'warning',
});

console.log(answer);
// Prints boolean to the console

Crear Diálogo Aceptar/Cancelar

Muestra un diálogo de pregunta con botones Ok y Cancel.

import { confirm } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { confirm } = window.__TAURI__.dialog;

// Creates a confirmation Ok/Cancel dialog
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', kind: 'warning' }
);

console.log(confirmation);
// Prints boolean to the console

Crear Diálogo de Mensaje

Muestra un diálogo de mensaje con un botón Ok. Ten en cuenta que si el usuario cierra el diálogo, devolverá false.

import { message } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { message } = window.__TAURI__.dialog;

// Shows message
await message('File not found', { title: 'Tauri', kind: 'error' });

Abrir un Diálogo de Selección de Archivos

Abrir un diálogo de selección de archivo/directorio.

La opción multiple controla si el diálogo permite selección múltiple o no, mientras que directory controla si es una selección de directorio o no.

import { open } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { open } = window.__TAURI__.dialog;

// Open a dialog
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// Prints file path or URI

Diálogo Guardar en Archivo

Abrir un diálogo para guardar archivo/directorio.

import { save } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { save } = window.__TAURI__.dialog;

// Prompt to save a 'My Filter' with extension .png or .jpeg
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// Prints the chosen path

---

Rust

Consulta la referencia de la API de Rust para ver todas las opciones disponibles.

Construir un Diálogo de Pregunta

Muestra un diálogo de pregunta con botones Absolutely y 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();

Si necesitas una operación no bloqueante, puedes usar show() en su lugar:

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 => // do something,
        false =>// do something,
    });

Construir un Diálogo de Mensaje

Muestra un diálogo de mensaje con un botón Ok. Ten en cuenta que si el usuario cierra el diálogo, devolverá false.

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

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

Si necesitas una operación no bloqueante, puedes usar show() en su lugar:

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 => // do something,
        false => // do something,
    });

Construir un Diálogo de Selección de Archivos

Seleccionar Archivos

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();
// return a file_path `Option`, or `None` if the user closes the dialog

Si necesitas una operación no bloqueante, puedes usar pick_file() en su lugar:

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // return a file_path `Option`, or `None` if the user closes the dialog
    })

Guardar Archivos

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // do something with the optional file path here
    // the file path is `None` if the user closed the dialog

o, alternativamente:

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // return a file_path `Option`, or `None` if the user closes the dialog
    });

Permiso Predeterminado

Este conjunto de permisos configura los tipos de diálogos disponibles en el plugin dialog.

Permisos Otorgados

Todos los tipos de diálogo están habilitados.

Este conjunto de permisos predeterminado incluye lo siguiente:

• allow-message
• allow-save
• allow-open

Tabla de Permisos

Identificador	Descripción
dialog:allow-ask	Habilita el comando ask sin ningún ámbito preconfigurado. (OBSOLETO: Ahora es un alias de allow-message y se eliminará en v3)
dialog:deny-ask	Deniega el comando ask sin ningún ámbito preconfigurado. (OBSOLETO: Ahora es un alias de deny-message y se eliminará en v3)
dialog:allow-message	Habilita el comando message sin ningún ámbito preconfigurado.
dialog:deny-message	Deniega el comando message sin ningún ámbito preconfigurado.
dialog:allow-open	Habilita el comando open sin ningún ámbito preconfigurado.
dialog:deny-open	Deniega el comando open sin ningún ámbito preconfigurado.
dialog:allow-save	Habilita el comando save sin ningún ámbito preconfigurado.
dialog:deny-save	Deniega el comando save sin ningún ámbito preconfigurado.
dialog:allow-confirm	Habilita el comando confirm sin ningún ámbito preconfigurado. (OBSOLETO: Ahora es un alias de allow-message y se eliminará en v3)
dialog:deny-confirm	Deniega el comando confirm sin ningún ámbito preconfigurado. (OBSOLETO: Ahora es un alias de deny-message y se eliminará en v3)