enes

SideNav

Navegación de app colapsable con un riel de iconos, un panel flotante, enlaces anidados, dos áreas de contenido personalizado y un pie fijo.

Page content

Uso

Coloca SideNav y AppSurface directamente dentro de AppWindow, despu�s de un TitleBar opcional. Los elementos son enlaces por defecto; usa as="button" para acciones y pasa active desde tu router. SideNav tambi�n funciona solo, en cualquier contenedor con altura.

<script>
	import { AppWindow, AppSurface, SideNav, SideNavItem } from 'fluentui-svelte';
	import { HomeRegular, FolderRegular, SettingsRegular } from 'fluentui-icons-svelte';
</script>

<AppWindow width={480} height={240}>
	<SideNav header="Workspace">
		<SideNavItem href="#home" label="Home" icon={HomeRegular} active />
		<SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
		<SideNavItem href="#settings" label="Settings" icon={SettingsRegular} />
	</SideNav>
	<AppSurface style="padding: 1rem">Page content</AppSurface>
</AppWindow>

Riel colapsado

Enlaza collapsed para expandir y colapsar la navegaci�n. Acoplada, una SideNav colapsada conserva un riel con el icono de cada elemento; un elemento sin icono muestra su inicial.

Navegación flotante

Con floating, la navegaci�n se superpone a su padre posicionado en lugar de ocupar espacio, y solo queda el bot�n de men� mientras est� cerrada. Escape, un clic fuera, mover el foco fuera o activar un elemento la cierran; pon closeOnSelect en false para mantenerla abierta al activar un elemento.

Page content

Posici�n

position coloca la navegaci�n a la izquierda, por defecto, o a la derecha de la ventana. AppSurface la sigue: redondea las esquinas que miran hacia la navegaci�n. Tambi�n aplica a una navegaci�n flotante, que se abre desde ese borde, y se invierte en dise�os de derecha a izquierda.

Page content

Con una barra de t�tulo

El bot�n de navegaci�n global de TitleBarLeftControls controla el SideNav del mismo AppWindow y ocupa el lugar de su hamburguesa. Usa showToggle en el SideNav para mostrar ambos.

Workspace
Page content

Navegación anidada y pie

SideNavBranch anida elementos bajo un desplegable, y el snippet footer fija elementos abajo. Abrir una rama desde el riel expande primero la navegaci�n. listViewProps personaliza todas las listas de la navegaci�n y puedes enlazar selectedItems cuando la selecci�n est� activada.

Contenido personalizado y menús

topContent va entre el bot�n de men� y la lista, y footerContent despu�s de ella. Cada uno acepta texto, un snippet o un componente; los renderers reciben collapsed y floating, y el texto simple se oculta en el riel.

Propiedades del componente (SideNav)

NameTypeDefaultDescription
ref bindableHTMLElement | nullLa referencia DOM de la región de navegación.
labelstring'Main navigation'El nombre accesible de la región de navegación.
collapsed bindablebooleanfalseMuestra un riel de iconos cuando está acoplado, o solo el botón cuando es flotante.
position'left' | 'right''left'El lado de la ventana en el que est� la navegaci�n. Se invierte en dise�os de derecha a izquierda, y AppSurface redondea las esquinas que miran hacia ella.
showTogglebooleanAutomaticSi la navegación muestra su propio botón de hamburguesa. Por defecto lo oculta cuando la barra de título de su ventana tiene un botón de navegación global, que pasa a controlar la navegación. Usa true para mantener ambos, o false para controlar la navegación tú mismo.
floatingbooleanfalseSe superpone al contenido de un contenedor posicionado sin ocupar espacio en el layout. No es modal.
widthnumber | string200El ancho expandido. Los números son píxeles convertidos a rem; los strings son longitudes CSS.
expandLabelstring'Expand navigation'El nombre accesible del botón cuando está colapsado.
collapseLabelstring'Collapse navigation'El nombre accesible del botón cuando está expandido.
closeOnSelectbooleantrueCierra el panel flotante al activar un SideNavItem.
onCollapsedChange(event: Event, collapsed: boolean) => voidSe llama cuando el usuario expande o colapsa la navegación.
selectedItems bindablestring[]La selecci�n compartida por todas las listas de la navegaci�n. Est� desactivada por defecto.
listViewPropsSideNavListViewPropsSobrescribe los valores por defecto de todas las listas de la navegaci�n, la principal, el pie y las de un SideNavBranch: sem�ntica de lista nativa, sin selecci�n y una parada de Tab por elemento.
headerstringEl encabezado de texto junto al botón de menú. Se oculta en el riel compacto.
topContentstring | Snippet | ComponentContenido personalizado entre la secci�n del bot�n de men� y la lista. Admite texto, snippets y componentes. Los renderers reciben collapsed y floating; el texto se oculta en el riel compacto.
footerContentstring | Snippet | ComponentContenido personalizado después de la lista desplazable y antes del pie fijo. Admite texto, snippets y componentes. Los renderers reciben collapsed y floating; el texto se oculta en el riel compacto.
footerSnippetElementos del pie de navegación fijos abajo, fuera del área desplazable de la lista principal.
childrenSnippetElementos principales de navegación. Usa SideNavItem y SideNavBranch.
HTMLAttributes<HTMLElement> without children

Propiedades del componente (SideNavItem)

NameTypeDefaultDescription
as'li' | 'a' | 'button' | 'div''a'La etiqueta HTML. Los enlaces son el valor por defecto; usa button para acciones y li o div para controles personalizados.
ref bindableHTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLDivElementLa referencia DOM del elemento.
labelstringEl nombre accesible, usado también como contenido visible si no hay children.
iconSnippet | ComponentEl icono decorativo que se muestra en los modos expandido y colapsado.
childrenSnippetMarkup opcional del elemento, como en ListViewItem. Se muestra label cuando no hay children.
shape, value, active, role, disabled, checkmark, onAction, onfocus from ListViewItemProps
HTML Attributes

Propiedades del componente (SideNavBranch)

NameTypeDefaultDescription
labelstringLa etiqueta accesible del bot�n de despliegue. En el riel compacto, su inicial ocupa el lugar del icono cuando no hay ninguno.
iconSnippet | ComponentEl icono decorativo antes de la etiqueta.
expanded bindablebooleanfalseSi los elementos anidados son visibles. Las ramas solo se expanden o se contraen y nunca son seleccionables. El riel compacto informa una rama como contra�da y abre la navegaci�n cuando se pulsa una.
onExpandedChange(e: Event, expanded: boolean) => voidSe llama cuando un usuario expande o contrae la rama.
disabledbooleanfalseDeshabilita el bot�n de despliegue.
ref bindableHTMLButtonElementLa referencia DOM del bot�n de despliegue nativo. Los atributos HTML adicionales, incluidos class e id, tambi�n se aplican a este bot�n.
wrapperRef bindableHTMLLIElement | HTMLDivElementLa referencia DOM del elemento contenedor, el elemento de lista que contiene el bot�n y la lista anidada.
wrapperAttributesHTMLAttributesLos atributos que se aplican al elemento contenedor.
shapeListViewItemBranchProps['shape']La forma del bot�n de despliegue. Se hereda de la lista de forma predeterminada.
childrenSnippetLos SideNavItem y SideNavBranch anidados.
HTMLButtonAttributes without children, role, type, value, aria-expanded, aria-controls
Editar este documento Ver como Markdown