Personalización de Ventana

Tauri ofrece muchas opciones para personalizar el aspecto y la sensación de la ventana de tu aplicación. Puedes crear barras de título personalizadas, tener ventanas transparentes, aplicar restricciones de tamaño y más.

Configuración

Hay tres formas de cambiar la configuración de la ventana:

Uso

Crear una Barra de Título Personalizada
(macOS) Barra de título transparente con color de fondo de ventana personalizado

Crear una Barra de Título Personalizada

Un uso común de estas características de ventana es crear una barra de título personalizada. Este breve tutorial te guiará a través de ese proceso.

tauri.conf.json

Establece decorations en false en tu tauri.conf.json:

"tauri": {
  "windows": [
    {
      "decorations": false
    }
  ]
}

Permisos

Agregar permisos de ventana en el archivo de capacidades.

Por defecto, todos los comandos de plugins están bloqueados y no se puede acceder a ellos. Debes definir una lista de permisos en tu configuración de capabilities.

Consulta la Visión General de Capacidades para obtener más información y la guía paso a paso para usar permisos de plugins.

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main-capability",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:window:default",
    "core:window:allow-close",
    "core:window:allow-minimize",
    "core:window:allow-toggle-maximize",
    "core:window:allow-start-dragging"
  ]
}

Permiso	Descripción
`core:window:default`	Permisos predeterminados para el plugin. Esto incluye `core:window:allow-internal-toggle-maximize`.
`core:window:allow-close`	Habilita el comando close sin ningún alcance preconfigurado.
`core:window:allow-minimize`	Habilita el comando minimize sin ningún alcance preconfigurado.
`core:window:allow-start-dragging`	Habilita el comando start_dragging sin ningún alcance preconfigurado.
`core:window:allow-toggle-maximize`	Habilita el comando toggle_maximize sin ningún alcance preconfigurado.
`core:window:allow-internal-toggle-maximize`	Habilita el comando internal_toggle_maximize sin ningún alcance preconfigurado.

CSS

Agrega este ejemplo de CSS para mantenerla en la parte superior de la pantalla y dar estilo a los botones:

.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: grid;
  grid-template-columns: auto max-content;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar > .controls {
  display: flex;
}
.titlebar button {
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  background-color: transparent;
}
.titlebar button:hover {
  background: #5bbec3;
}

HTML

Coloca esto en la parte superior de tu etiqueta <body>:

<div class="titlebar">
  <div data-tauri-drag-region></div>
  <div class="controls">
    <button id="titlebar-minimize" title="minimize">
      <!-- https://api.iconify.design/mdi:window-minimize.svg -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path fill="currentColor" d="M19 13H5v-2h14z" />
      </svg>
    </button>
    <button id="titlebar-maximize" title="maximize">
      <!-- https://api.iconify.design/mdi:window-maximize.svg -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
      </svg>
    </button>
    <button id="titlebar-close" title="close">
      <!-- https://api.iconify.design/mdi:close.svg -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
        />
      </svg>
    </button>
  </div>
</div>

Ten en cuenta que es posible que debas mover el resto de tu contenido hacia abajo para que la barra de título no lo cubra.

En Windows, si solo deseas una barra de título que no necesite interacciones personalizadas, puedes usar

*[data-tauri-drag-region] {
  app-region: drag;
}

para hacer que la barra de título funcione con entradas táctiles y de lápiz

JavaScript

Usa este fragmento de código para hacer que los botones funcionen:

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

// when using `"withGlobalTauri": true`, you may use
// const { getCurrentWindow } = window.__TAURI__.window;

const appWindow = getCurrentWindow();

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

Ten en cuenta que si estás utilizando un frontend basado en Rust, puedes copiar el código anterior dentro de un elemento <script> en tu archivo index.html.

Implementación Manual de `data-tauri-drag-region`

Para casos de uso donde personalices el comportamiento de arrastre, puedes agregar manualmente un escuchador de eventos con window.startDragging en lugar de usar data-tauri-drag-region.

HTML

Del código en la sección anterior, eliminamos data-tauri-drag-region y agregamos un id:

<div data-tauri-drag-region class="titlebar">
  <div id="titlebar" class="titlebar">
    <!-- ... -->
  </div>
</div>

JavaScript

Agrega un escuchador de eventos al elemento de la barra de título:

// ...
document.getElementById('titlebar')?.addEventListener('mousedown', (e) => {
  if (e.buttons === 1) {
    // Primary (left) button
    e.detail === 2
      ? appWindow.toggleMaximize() // Maximize on double click
      : appWindow.startDragging(); // Else start dragging
  }
});

(macOS) Barra de título transparente con color de fondo de ventana personalizado

Vamos a crear la ventana principal y cambiar su color de fondo desde el lado de Rust.

Elimina la ventana principal del archivo tauri.conf.json:

"tauri": {
  "windows": [
    {
      "title": "Transparent Titlebar Window",
      "width": 800,
      "height": 600
    }
  ],
}

Agrega la crate cocoa a las dependencias para que podamos usarla para llamar a la API nativa de macOS:

[target."cfg(target_os = \"macos\")".dependencies]
objc2-app-kit = { version = "0.3.2", features = ["NSColor", "NSWindow", "objc2-core-foundation"] }

Crea la ventana principal y cambia su color de fondo:

use tauri::{TitleBarStyle, WebviewUrl, WebviewWindowBuilder};

pub fn run() {
  tauri::Builder::default()
    .setup(|app| {
      let win_builder =
        WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
          .title("Transparent Titlebar Window")
          .inner_size(800.0, 600.0);

      // set transparent title bar only when building for macOS
      #[cfg(target_os = "macos")]
      let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);

      let window = win_builder.build().unwrap();

      // set background color only when building for macOS
      #[cfg(target_os = "macos")]
      {
        use objc2_app_kit::{NSColor, NSWindow};

        let ns_window_ptr = window.ns_window().unwrap() as *mut NSWindow;
        let ns_window = unsafe { &*ns_window_ptr };
        let bg_color = NSColor::colorWithRed_green_blue_alpha(
          50.0 / 255.0,
          158.0 / 255.0,
          163.5 / 255.0,
          1.0,
        );
        ns_window.setBackgroundColor(Some(&bg_color));
      }

      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Apoya en Open Collective Patrocina en GitHub

Personalización de Ventana

Configuración

Uso

Crear una Barra de Título Personalizada

tauri.conf.json

Permisos

CSS

HTML

JavaScript

Implementación Manual de data-tauri-drag-region

HTML

JavaScript

(macOS) Barra de título transparente con color de fondo de ventana personalizado

Implementación Manual de `data-tauri-drag-region`