AppSurface
An app surface is the area of an app that holds its content, next to the navigation. It is square on its own; next to a SideNav it rounds the corner that faces it and the one across from it. It is either a layer over the window or the mica of the window itself, in the colors of an active or an inactive window.
Usage
Put the content of the app inside the surface. It fills the room left by AppWindow, scrolls overflowing content and uses layer mode by default. It inherits the window active state unless overridden. Without a SideNav it has no corner radius; with one it rounds the corners that face it and the ones across from it, following its position, and a floating and collapsed SideNav removes them until either state changes.
<script>
import { AppSurface, AppWindow } from 'fluentui-svelte';
</script>
<AppWindow width={400} height={160}>
<AppSurface style="padding: 1rem">This is the content of the app.</AppSurface>
</AppWindow>Mode
layer, the default, is a layer over the window, with the stroke of a card. mica paints the base of the window itself, with the stroke of a control surface.
Active and Inactive
active tells whether the window the surface lives in is the active one. A layer is solid while active and translucent while inactive, which is the default; mica paints the same base in both states. Set it from the same focus state as the window.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | HTMLElement | The DOM reference of the surface element. | |
mode | 'layer' | 'mica' | 'layer' | The material of the surface: a layer over the window, or the mica of the window itself. |
active | boolean | false | Whether the window the surface lives in is active, which picks the surface color. Inherits AppWindow's active state when omitted, or false when standalone. |
children | Snippet | The content of the surface. | |
HTMLAttributes<HTMLDivElement> without children |