AppWindow

Una ventana de aplicación es la superficie de una aplicación: una ventana con Mica, con su propio borde y una sombra del shell que distingue la ventana activa de las inactivas. Está construida sobre el Flyout, así que recibe su contenido igual que él, y ocupa el espacio que la rodea salvo que le des un tamaño.

Uso

Empieza por un TitleBar si la ventana lo tiene y coloca el contenido de la página en un AppSurface u otro contenedor desplazable. La ventana recorta el contenido que desborda. Mide 100% de ancho y de alto salvo que le des un width y un height.

<script>
	import { AppSurface, AppWindow, TitleBar, TitleBarLeftControls, TitleBarRightControls } from 'fluentui-svelte';
	import { AppsRegular } from 'fluentui-icons-svelte';
</script>

<AppWindow width={400} height={200}>
	<TitleBar>
		{#snippet leftControls()}
			<TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
		{/snippet}
		{#snippet rightControls()}
			<TitleBarRightControls />
		{/snippet}
	</TitleBar>
	<AppSurface style="padding: 1rem">This is the content of the window.</AppSurface>
</AppWindow>

Tamaño

width y height aceptan un número en píxeles o cualquier longitud CSS. Por defecto consumen el 100% de su contenedor.

<AppWindow width={200} height={100} />
<AppWindow width="14rem" height="6rem" />

<div style="width: 260px; height: 120px">
  <AppWindow />
</div>

Contexto compartido de la ventana

AppWindow proporciona un contexto por ventana. Llama a getAppWindowContext() desde componentes descendientes para consultar dimensiones, active/maximized/minimized del host y los SideNav, TitleBar y AppSurface registrados. Las partes son null hasta montarse y se limpian al desmontarse. SideNav publica collapsed/floating reactivos. Las ventanas anidadas son independientes. Las props explícitas de cada componente prevalecen sobre los valores heredados.

<!-- WindowStatus.svelte -->
<script>
	import { getAppWindowContext } from 'fluentui-svelte';
	const appWindow = getAppWindowContext();
</script>

<p>Maximized: {appWindow?.state.maximized ?? false}</p>
<p>Minimized: {appWindow?.state.minimized ?? false}</p>
<p>Navigation collapsed: {appWindow?.state.sideNav?.collapsed ?? false}</p>
<p>Navigation floating: {appWindow?.state.sideNav?.floating ?? false}</p>

<script>
	import { AppWindow, AppSurface, SideNav, SideNavItem, TitleBar, TitleBarRightControls } from 'fluentui-svelte';
	import WindowStatus from './WindowStatus.svelte';
	let maximized = $state(false);
	let minimized = $state(false);
</script>

<AppWindow width={640} height={400} active bind:maximized bind:minimized>
	<TitleBar>
		{#snippet rightControls()}
			<TitleBarRightControls onWindowToggle={() => (maximized = !maximized)} onMinimize={() => (minimized = !minimized)} />
		{/snippet}
	</TitleBar>
	<SideNav floating collapsed><SideNavItem href="/" label="Home" /></SideNav>
	<AppSurface><WindowStatus /></AppSurface>
</AppWindow>

Activa e inactiva

active elige la sombra del shell que proyecta la ventana: la más ligera de una ventana inactiva, que es la de por defecto, o la más profunda de la ventana activa. Defínela a partir del estado de foco de la ventana en la que vive tu aplicación.

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

<AppWindow {active} width={400} height={160} />

Con barra de título

La ventana pinta el fondo Mica, así que un TitleBar dentro de ella se mantiene transparente y se apoya directamente sobre él.

<AppWindow width={400} height={220}>
  <TitleBar searchMinWidth={120}>
    {#snippet leftControls()}
      <TitleBarLeftControls appIcon={AppsRegular} appName="FluentUI App" />
    {/snippet}
    {#snippet search()}
      <AutoSuggestBox placeholder="Search" aria-label="Search" />
    {/snippet}
    {#snippet rightControls()}
      <TitleBarRightControls />
    {/snippet}
  </TitleBar>
  <AppSurface style="padding: 1rem">This is the content of the window.</AppSurface>
</AppWindow>

Propiedades del componente