TitleBar

Una barra de título es la barra superior del marco de una aplicación, dispuesta como la de una aplicación de Windows 11: la identidad de la aplicación y su navegación al inicio, una búsqueda que crece y se reduce en el centro, y la foto de la persona y los controles de la ventana al final. No pinta ningún fondo propio, ya que se coloca sobre el componente que renderiza la ventana.

FluentUI App PREVIEW

Para crear una barra de título, necesitarás usar los siguientes componentes:

TitleBar: El componente raíz. Distribuye las tres áreas, mantiene la búsqueda entre sus límites de ancho y la colapsa cuando se le pide.
TitleBarLeftControls: Los controles al inicio de la barra: un botón de retroceso, un botón de navegación global, y el icono, el nombre y la etiqueta de versión de la aplicación.
TitleBarRightControls: Los controles al final de la barra: menús personalizados, la foto de la persona y los botones de minimizar, maximizar y cerrar de la ventana.

Uso

Compón la barra con sus tres áreas mediante los snippets leftControls, search y rightControls. Cada área es opcional. TitleBarLeftControls y TitleBarRightControls siguen los ajustes de la barra cuando se renderizan dentro de un TitleBar, y también funcionan por sí solos. Los botones de la ventana solo informan de la pulsación, ya que minimizar, maximizar y cerrar la ventana depende del host de tu aplicación.

<script>
	import { TitleBar, TitleBarLeftControls, TitleBarRightControls } from 'fluentui-svelte';
	import { AppsRegular } from 'fluentui-icons-svelte';
	import { getCurrentWindow } from '@tauri-apps/api/window';

	const appWindow = getCurrentWindow();
	let maximized = $state(false);
	appWindow.isMaximized().then((value) => (maximized = value));
</script>

<TitleBar>
	{#snippet leftControls()}
		<TitleBarLeftControls back globalNav appIcon={AppsRegular} appName="FluentUI App" releaseTag="PREVIEW" />
	{/snippet}
	{#snippet rightControls()}
		<TitleBarRightControls
			{maximized}
			personPic={{ name: 'Ada Lovelace' }}
			onMinimize={() => appWindow.minimize()}
			onWindowToggle={async () => {
				await appWindow.toggleMaximize();
				maximized = await appWindow.isMaximized();
			}}
			onClose={() => appWindow.close()}
		/>
	{/snippet}
</TitleBar>

Controles izquierdos

back y globalNav muestran un botón cada uno e informan de la pulsación con onBack y onGlobalNav. Establece globalNavExpanded mientras la navegación esté abierta, o pasa un snippet a globalNav para dibujar tú mismo el botón.

Ver Código

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls
      back
      globalNav
      globalNavExpanded={navExpanded}
      onBack={() => history.back()}
      onGlobalNav={() => (navExpanded = !navExpanded)}
      appIcon={AppsRegular}
      appName="FluentUI App"
    />
  {/snippet}
</TitleBar>

FluentUI App

Icono de la aplicación

appIcon acepta la URL de una imagen, un componente de icono de Fluent o un snippet que dibuja un SVG personalizado. Es decorativo, así que lo que identifica a la aplicación es su nombre.

Ver Código

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls appIcon="/logo.png" appName="Image URL" />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls appIcon={AppsRegular} appName="Fluent icon" />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls appName="Custom SVG">
      {#snippet appIcon(props)}
        <svg {...props} viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor" /></svg>
      {/snippet}
    </TitleBarLeftControls>
  {/snippet}
</TitleBar>

Image URL

Fluent icon

Custom SVG

Etiqueta de versión

releaseTag marca el estado de versión de la aplicación, como PREVIEW o BETA, en una insignia junto a su nombre. Acepta un string o un snippet.

Ver Código

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" releaseTag="PREVIEW" />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" releaseTag="BETA" />
  {/snippet}
</TitleBar>

FluentUI App PREVIEW

FluentUI App BETA

Búsqueda

El snippet search se ubica en el centro de la barra y ocupa el ancho que la barra le da, creciendo y reduciéndose con la ventana. Una barra con búsqueda es tall por defecto, lo que le da espacio a la búsqueda.

Ver Código

<TitleBar searchMinWidth={120}>
  {#snippet leftControls()}
    <TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
  {/snippet}
  {#snippet search()}
    <AutoSuggestBox placeholder="Search" aria-label="Search">
      <AutoSuggestBoxOption index={0} value="Documents">Documents</AutoSuggestBoxOption>
      <AutoSuggestBoxOption index={1} value="Pictures">Pictures</AutoSuggestBoxOption>
    </AutoSuggestBox>
  {/snippet}
  {#snippet rightControls()}
    <TitleBarRightControls />
  {/snippet}
</TitleBar>

FluentUI App

Ancho de la búsqueda

searchMinWidth y searchMaxWidth definen cuánto se reduce y cuánto crece la búsqueda. Los números son valores en píxeles convertidos a rem usando el tamaño actual de la fuente raíz, con un fallback de 16px durante SSR. Por ejemplo, 200 se convierte en 10rem con una raíz de 20px y sigue ocupando 200px. Un string es cualquier longitud CSS.

Ver Código

<TitleBar searchMinWidth={100} searchMaxWidth={180}>...</TitleBar>
<TitleBar searchMinWidth="30%" searchMaxWidth="60%">...</TitleBar>

100 to 180 pixels

30% to 60%

Búsqueda colapsada

searchCollapsed pliega manualmente la búsqueda en un botón; cambiar el tamaño no la colapsa automáticamente. Al pulsar el botón se expande la búsqueda y el foco pasa al primer control disponible. Enlázala para seguir el estado. Deja espacio suficiente para la búsqueda expandida y los controles laterales, o reduce searchMinWidth. Los nombres largos de la app se truncan, pero los botones de navegación y de ventana siguen necesitando espacio.

Ver Código

<script>
  let collapsed = $state(false);
</script>

<TitleBar searchMinWidth={120} bind:searchCollapsed={collapsed}>
  {#snippet search()}
    <AutoSuggestBox placeholder="Search" aria-label="Search" />
  {/snippet}
  ...
</TitleBar>

Collapsed

FluentUI App

Controles de ventana

hideMinimize, hideWindowToggle y hideClose quitan cada uno un botón de ventana de la barra. onMinimize, onWindowToggle y onClose informan de la pulsación.

Ver Código

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls hideMinimize />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls hideWindowToggle />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls hideClose />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls hideMinimize hideWindowToggle />
  {/snippet}
</TitleBar>

Maximizada

Mientras maximized esté activo, el botón de maximizar pasa a ser un botón de restaurar, con el icono y la etiqueta que le corresponden.

Ver Código

<script>
  let maximized = $state(false);
</script>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls {maximized} onWindowToggle={() => (maximized = !maximized)} />
  {/snippet}
</TitleBar>

Foto de la persona

personPic acepta las props de un Avatar, como su image, dibujado a 24 píxeles salvo que indiques un tamaño. Añade onPersonPicClick para convertir la foto en un botón, como el que abre una cuenta.

Ver Código

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls personPic={{ name: 'Ada Lovelace', image: { src: 'https://placehold.co/120x120/jpeg' } }} />
  {/snippet}
</TitleBar>

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls
      personPic={{ name: 'Grace Hopper', image: { src: 'https://placehold.co/120x120/jpeg' }, size: 28 }}
      onPersonPicClick={() => openAccount()}
    />
  {/snippet}
</TitleBar>

Menú personalizado

El snippet customMenu coloca tus propias acciones antes de la foto de la persona, como un menú de configuración.

Ver Código

<TitleBar>
  {#snippet rightControls()}
    <TitleBarRightControls personPic={{ name: 'Ada Lovelace', image: { src: 'https://placehold.co/120x120/jpeg' } }}>
      {#snippet customMenu()}
        <Menu>
          <MenuTrigger>
            {#snippet children({ state, menuTriggerProps })}
              <Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label="Settings">
                <SettingsRegular width="1rem" height="1rem" />
              </Button>
            {/snippet}
          </MenuTrigger>
          <MenuPopover>
            <MenuList>
              <MenuItem>Preferences</MenuItem>
              <MenuItem>Keyboard shortcuts</MenuItem>
            </MenuList>
          </MenuPopover>
        </Menu>
      {/snippet}
    </TitleBarRightControls>
  {/snippet}
</TitleBar>

Etiquetas

Los nombres accesibles de los botones están en inglés por defecto. Pasa backLabel, globalNavLabel, searchLabel, minimizeLabel, maximizeLabel, restoreLabel y closeLabel para traducirlos.

Ver Código

<TitleBar>
  {#snippet leftControls()}
    <TitleBarLeftControls back globalNav backLabel="Atrás" globalNavLabel="Menú de navegación" />
  {/snippet}
  {#snippet rightControls()}
    <TitleBarRightControls
      minimizeLabel="Minimizar"
      maximizeLabel="Maximizar"
      restoreLabel="Restaurar"
      closeLabel="Cerrar"
    />
  {/snippet}
</TitleBar>

Orden de tabulación

Los botones de la barra están en el orden de tabulación por defecto. Establece tabbable en false solo cuando el host de escritorio proporcione una alternativa de teclado para estas acciones. El contenido que pongas en los snippets conserva su propio orden de tabulación.

Ver Código

<TitleBar tabbable>
  {#snippet leftControls()}
    <TitleBarLeftControls back globalNav appName="FluentUI App" />
  {/snippet}
  {#snippet rightControls()}
    <TitleBarRightControls />
  {/snippet}
</TitleBar>

FluentUI App

Región de arrastre

dragRegionProps se aplica a la barra, sus áreas de inicio y de fin y la identidad de la app, para que el host que mueve la ventana sepa de dónde agarrar la barra. Usa data-tauri-drag-region en Tauri, o un manejador de puntero en cualquier otro host.

<TitleBar dragRegionProps={{ 'data-tauri-drag-region': true }}>
	...
</TitleBar>

<TitleBar dragRegionProps={{ onpointerdown: (e) => e.target === e.currentTarget && appWindow.startDragging() }}>
	...
</TitleBar>

Propiedades del componente (TitleBar)

Name	Type	Default	Description
`ref` bindable	`HTMLElement` \| `null`		La referencia del DOM del elemento de la barra de título.
`leftControls`	`Snippet`		Los controles al inicio de la barra: retroceso, navegaci�n y la identidad de la aplicaci�n. Renderiza aqu� un `TitleBarLeftControls`.
`search`	`Snippet`		La búsqueda en el centro de la barra, que crece y se reduce con la ventana entre `searchMinWidth` y `searchMaxWidth`.
`rightControls`	`Snippet`		Los controles al final de la barra: men�s personalizados, la foto de la persona y los botones de la ventana. Renderiza aqu� un `TitleBarRightControls`.
`tall`	`boolean`		Usa la barra alta, que le da espacio a la búsqueda. Está activa por defecto cuando se proporciona `search`.
`searchMinWidth`	`number` \| `string`	`200`	Lo más estrecha que llega a ser la búsqueda mientras la ventana se reduce. Un número está en píxeles, convertido a rem usando el tamaño actual de la fuente raíz, con un fallback de 16px durante SSR. Un string es cualquier longitud CSS.
`searchMaxWidth`	`number` \| `string`	`480`	Lo más ancha que llega a ser la búsqueda mientras la ventana crece. Un número está en píxeles, convertido a rem usando el tamaño actual de la fuente raíz, con un fallback de 16px durante SSR. Un string es cualquier longitud CSS.
`searchCollapsed` bindable	`boolean`	`false`	Colapsa manualmente la búsqueda en un botón; no se colapsa automáticamente al cambiar el tamaño. Al pulsar el botón se expande la búsqueda y el foco pasa al primer control disponible. El host debe dejar espacio suficiente para la búsqueda expandida y los controles laterales.
`searchLabel`	`string`	`'Search'`	El nombre accesible del botón que reemplaza a una búsqueda colapsada.
`tabbable`	`boolean`	`true`	Permite que la tecla Tab llegue a los botones de la barra. Establécelo en false solo cuando el host de escritorio proporcione una alternativa de teclado para estas acciones. El contenido que renderizas en los snippets no se ve afectado.
`dragRegionProps`	`HTMLAttributes`		Los atributos que hacen que la barra se pueda arrastrar para el host que mueve la ventana, como `data-tauri-drag-region` en Tauri. Se aplican a la barra, sus áreas de inicio y de fin y la identidad de la app.
`HTMLAttributes<HTMLElement>` without `children`

Propiedades del componente (TitleBarLeftControls)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		La referencia del DOM del elemento de controles.
`back`	`boolean`	`false`	Muestra el botón de retroceso.
`backDisabled`	`boolean`	`false`	Deshabilita el botón de retroceso, para cuando no hay a dónde volver.
`onBack`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa el botón de retroceso.
`backLabel`	`string`	`'Back'`	El nombre accesible del botón de retroceso.
`globalNav`	`boolean` \| `Snippet`	`false`	Muestra el botón de navegación global, o lo reemplaza por el snippet que proporciones.
`globalNavExpanded`	`boolean`	`false`	Si la navegación que controla el botón de navegación global está expandida. Dentro de un AppWindow con un SideNav sigue al SideNav, y el botón lo expande y lo colapsa.
`onGlobalNav`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa el botón de navegación global. Llama a `preventDefault()` para evitar que alterne el SideNav de la ventana.
`globalNavLabel`	`string`	`'Navigation menu'`	El nombre accesible del botón de navegación global.
`appIcon`	`string` \| `Snippet` \| `Component`		El icono de la aplicación: la URL de una imagen, un componente de icono o un snippet que dibuja un SVG personalizado.
`appIconLabel`	`string`	`'Application'`	El nombre accesible del icono de la app cuando appName no está presente. Usa el nombre de la app cuando su identidad solo muestre un icono.
`appName`	`string`		El nombre de la aplicación.
`releaseTag`	`string` \| `Snippet`		El estado de versión de la aplicación, como `PREVIEW` o `BETA`.
`children`	`Snippet`		Más contenido después de la etiqueta de versión, como un subtítulo.
`HTMLAttributes<HTMLDivElement>` without `children`

Propiedades del componente (TitleBarRightControls)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		La referencia del DOM del elemento de controles.
`hideMinimize`	`boolean`	`false`	Oculta el botón de minimizar.
`hideWindowToggle`	`boolean`	`false`	Oculta el botón de maximizar y restaurar.
`hideClose`	`boolean`	`false`	Oculta el botón de cerrar.
`maximized`	`boolean`	`false`	Indica si la ventana está maximizada y cambia el botón de maximizar a restaurar. Hereda maximized de AppWindow cuando se omite, o false si se usa de forma independiente.
`onMinimize`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa el botón de minimizar.
`onWindowToggle`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa el botón de maximizar o restaurar.
`onClose`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa el botón de cerrar.
`minimizeLabel`	`string`	`'Minimize'`	El nombre accesible del botón de minimizar.
`maximizeLabel`	`string`	`'Maximize'`	El nombre accesible del botón de maximizar.
`restoreLabel`	`string`	`'Restore'`	El nombre accesible del botón de restaurar.
`closeLabel`	`string`	`'Close'`	El nombre accesible del botón de cerrar.
`personPic`	`AvatarProps`		Las props del `Avatar` que muestra a la persona. Su tamaño es 24 salvo que indiques otro.
`onPersonPicClick`	`MouseEventHandler<HTMLButtonElement>`		Se llama cuando se pulsa la foto de la persona, lo que la convierte en un botón.
`customMenu`	`Snippet`		Los menús o acciones personalizados que se colocan antes de la foto de la persona.
`HTMLAttributes<HTMLDivElement>` without `children`

Componentes

TitleBar

Uso

Controles izquierdos

Icono de la aplicación

Etiqueta de versión

Búsqueda

Ancho de la búsqueda

Búsqueda colapsada

Controles de ventana

Maximizada

Foto de la persona

Menú personalizado

Etiquetas

Orden de tabulación

Región de arrastre

Propiedades del componente (TitleBar)

Propiedades del componente (TitleBarLeftControls)

Propiedades del componente (TitleBarRightControls)