AppWindow

An app window is the surface of an app: a Mica window with its own border and a shell shadow that tells the active window from the inactive ones. It is built on the Flyout, so it takes its content the same way, and it fills the space around it unless you give it a size.

Usage

Start with a TitleBar if the window has one, then place page content in an AppSurface or another scrollable container. The window itself clips overflow. It is 100% wide and tall unless you give it a width and a 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>

Size

width and height take a number in pixels or any CSS length. By default they take 100% of their container.

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

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

Shared window context

AppWindow provides a context per window. Call getAppWindowContext() in descendant components to read dimensions, host active/maximized/minimized state, and the registered SideNav, TitleBar and AppSurface. Registered parts are null until mounted and cleared on unmount. SideNav publishes live collapsed/floating values. Nested windows are independent. Explicit component props override inherited values.

<!-- 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>

Active and Inactive

active picks the shell shadow the window casts: the lighter one of an inactive window, which is the default, or the deeper one of the active window. Set it from the focus state of the window your app lives in.

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

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

With a Title Bar

The window paints the Mica background, so a TitleBar inside it stays transparent and sits right on it.

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

Component Props