Personalizacion de Ventanas

Configuracion basica

En tauri.conf.json:

{
  "app": {
    "windows": [
      {
        "label": "main",
        "title": "Mi App",
        "width": 1024,
        "height": 768,
        "minWidth": 400,
        "minHeight": 300,
        "resizable": true,
        "fullscreen": false,
        "center": true
      }
    ]
  }
}

Opciones comunes

Opcion	Tipo	Descripcion
label	string	Identificador unico de la ventana
title	string	Titulo en la barra
width/height	number	Tamano inicial
minWidth/minHeight	number	Tamano minimo
maxWidth/maxHeight	number	Tamano maximo
resizable	bool	Permite redimensionar
fullscreen	bool	Pantalla completa
center	bool	Centrar al abrir
decorations	bool	Barra de titulo nativa
transparent	bool	Fondo transparente
alwaysOnTop	bool	Siempre visible
visible	bool	Visible al iniciar

Ventana sin decoraciones

Para UI completamente custom (sin barra de titulo nativa):

{
  "app": {
    "windows": [
      {
        "label": "main",
        "decorations": false,
        "width": 800,
        "height": 600
      }
    ]
  }
}

Necesitaras implementar tu propia barra de titulo con botones de cerrar/minimizar/maximizar y hacer la ventana arrastrable:

<div data-tauri-drag-region class="titlebar">
  <span>Mi App</span>
  <div class="titlebar-buttons">
    <button id="minimize">−</button>
    <button id="maximize">□</button>
    <button id="close">×</button>
  </div>
</div>

import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();

document.getElementById('minimize').addEventListener('click', () => appWindow.minimize());
document.getElementById('maximize').addEventListener('click', () => appWindow.toggleMaximize());
document.getElementById('close').addEventListener('click', () => appWindow.close());

El atributo data-tauri-drag-region hace que esa zona sea arrastrable.

Crear ventanas en runtime

Desde JavaScript:

import { WebviewWindow } from '@tauri-apps/api/webview';

const settings = new WebviewWindow('settings', {
    url: '/settings',
    title: 'Configuracion',
    width: 600,
    height: 400,
    center: true,
});

settings.once('tauri://created', () => {
    console.log('Ventana creada');
});

Desde Rust:

use tauri::{WebviewUrl, WebviewWindowBuilder};

#[tauri::command]
async fn open_settings(app: tauri::AppHandle) {
    WebviewWindowBuilder::new(&app, "settings", WebviewUrl::App("/settings".into()))
        .title("Configuracion")
        .inner_size(600.0, 400.0)
        .center()
        .build()
        .unwrap();
}

Splashscreen

Para mostrar una pantalla de carga mientras la app inicializa:

Configuracion

{
  "app": {
    "windows": [
      {
        "label": "splashscreen",
        "url": "/splashscreen",
        "width": 400,
        "height": 300,
        "decorations": false,
        "center": true,
        "resizable": false
      },
      {
        "label": "main",
        "visible": false,
        "width": 1024,
        "height": 768
      }
    ]
  }
}

Transicion

use tauri::Manager;

pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let splashscreen = app.get_webview_window("splashscreen").unwrap();
            let main = app.get_webview_window("main").unwrap();

            tauri::async_runtime::spawn(async move {
                // Inicializacion pesada aqui...
                tokio::time::sleep(std::time::Duration::from_secs(2)).await;

                splashscreen.close().unwrap();
                main.show().unwrap();
            });
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error");
}

Resumen

• Configura ventanas en tauri.conf.json o crealas en runtime
• decorations: false para UI completamente custom
• data-tauri-drag-region para zonas arrastrables
• Crea multiples ventanas con WebviewWindow (JS) o WebviewWindowBuilder (Rust)
• Splashscreen: dos ventanas, la principal oculta hasta que termine la inicializacion

---

← Seguridad y Permisos | Indice | Siguiente: System Tray y Menus →