Diálogo

API Reference

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

Supported Platforms

This plugin requires a Rust version of at least 1.78

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

Configuración

Instala el plugin de diálogo para comenzar.

Automatic
Manual

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

npm run tauri add dialog

yarn run tauri add dialog

pnpm tauri add dialog

cargo tauri add dialog

Ejecuta cargo add tauri-plugin-dialog para agregar el plugin a las dependencias del proyecto en Cargo.toml.
Modifica lib.rs para inicializar el plugin:

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

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

npm install @tauri-apps/plugin-dialog

yarn add @tauri-apps/plugin-dialog

pnpm add @tauri-apps/plugin-dialog

Uso

El plugin de diálogo está disponible tanto en JavaScript como en Rust. Aquí tienes cómo puedes usarlo:

en JavaScript:

Crear un diálogo de Si/No
Crear un diálogo de Ok/Cancelar
Crear un diálogo de mensaje
Abrir un diálogo de selección de archivos
Diálogo de 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

JavaScript

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

Crear un diálogo de Si/No

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

import { ask } from '@tauri-apps/plugin-dialog';

// Crea un diálogo de Sí/No
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  type: 'warning',
});

console.log(answer);
// Imprime un booleano en la consola

Crear un diálogo de Ok/Cancelar

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

import { confirm } from '@tauri-apps/plugin-dialog';

// Crea un diálogo de confirmación Ok/Cancelar
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', type: 'warning' }
);

console.log(confirmation);
// Imprime un booleano en la consola

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

import { message } from '@tauri-apps/plugin-dialog';

// Muestra un mensaje
await message('File not found', { title: 'Tauri', type: 'error' });

Abrir un diálogo de selección de archivos

Abre un diálogo de selección de archivos/directorios.

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

import { open } from '@tauri-apps/plugin-dialog';

// Abre un diálogo
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// Imprime la ruta y el nombre del archivo en la consola

Diálogo de guardar en archivo

Abre un diálogo de guardar archivo/directorio.

import { save } from '@tauri-apps/plugin-dialog';
// Indica para guardar un 'My Filter' con extensión .png o .jpeg
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// Imprime la ruta escogida

Rust

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

Construir un diálogo de pregunta

Muestra una diálogo de pregunta con botones Absolutely y Totally.

use tauri_plugin_dialog::DialogExt;

let answer = app.dialog()
        .message("Tauri is Awesome")
        .title("Tauri is Awesome")
        .ok_button_label("Absolutely")
        .cancel_button_label("Totally")
        .blocking_show();

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

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .message("Tauri is Awesome")
    .title("Tauri is Awesome")
    .ok_button_label("Absolutely")
    .cancel_button_label("Totally")
    .show(|result| match result {
        true => // hacer algo,
        false =>// hacer algo,
    });

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, MessageDialogKind};

app.dialog()
    .message("Tauri is Awesome")
    .kind(MessageDialogKind::Info)
    .title("Information")
    .ok_button_label("Absolutely")
    .show(|result| match result {
        true => // hacer algo,
        false => // hacer algo,
    });

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();
// devuelve un `Option` de file_path, o `None` si el usuario cierra el diálogo

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

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // devuelve un `Option` de file_path, o `None` si el usuario cierra el diálogo
    })

Guardar archivos

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // haz algo con la ruta de archivo opcional aquí
    // la ruta del archivo es `None` si el usuario cierra el diálogo

o, alternativamente:

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // devuelve un `Option` de file_path, o `None` si el usuario cierra el diálogo
    });