AppSurface
Una superficie de aplicaci�n es el �rea de una aplicaci�n que contiene su contenido, junto a la navegaci�n. Es cuadrada por s� sola; junto a una SideNav redondea la esquina que la mira y la opuesta. Es o bien un layer sobre la ventana o bien el mica de la propia ventana, con los colores de una ventana activa o inactiva.
Uso
Pon el contenido de la aplicaci�n dentro de la superficie. Llena el espacio que deja AppWindow, desplaza el contenido que desborda y usa el modo layer por defecto. Hereda el estado activo de la ventana salvo que lo sobrescribas. Sin una SideNav no tiene radio de esquina; con una redondea las esquinas que la miran y las opuestas, seg�n su position, y una SideNav flotante y colapsada las quita hasta que cambie alguno de los dos estados.
<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>Modo
layer, el valor por defecto, es una capa sobre la ventana, con el trazo de una tarjeta. mica pinta la base de la propia ventana, con el trazo de una superficie de control.
Activa e inactiva
active indica si la ventana en la que vive la superficie es la activa. Un layer es sólido mientras está activo y translúcido mientras está inactivo, que es lo predeterminado; mica pinta la misma base en ambos estados. Defínela a partir del mismo estado de foco que la ventana.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | HTMLElement | La referencia del DOM del elemento de la superficie. | |
mode | 'layer' | 'mica' | 'layer' | El material de la superficie: un layer sobre la ventana, o el mica de la propia ventana. |
active | boolean | false | Indica si la ventana que contiene la superficie está activa y determina su color. Hereda active de AppWindow cuando se omite, o false si se usa de forma independiente. |
children | Snippet | El contenido de la superficie. | |
HTMLAttributes<HTMLDivElement> without children |