enes

Primeros Pasos

Esta página te guiará a través del proceso de instalación y uso de FluentUI Svelte.

Instalación

Para instalar FluentUI Svelte, ejecuta uno de los siguientes comandos:

NPM:

npm i -D fluentui-svelte

Yarn:

yarn add -D fluentui-svelte

PNPM:

pnpm add -D fluentui-svelte

Archivos CSS requeridos

Necesitas importar los archivos CSS en tu proyecto. Puedes hacerlo agregando la siguiente línea a tu archivo principal +layout.svelte archivo:

import 'fluentui-svelte/theme.css';
  • Puedes sobrescribir las variables CSS definiéndolas en el archivo CSS de tu aplicación.
  • O, también puedes copiar el archivo CSS desde la carpeta dist e incluirlo directamente en tu proyecto si deseas modificarlo.

Archivos CSS opcionales

También puedes importar los archivos CSS opcionales que brindan estilos adicionales como `typography`, `dark-mode` y un `reset` básico:

import 'fluentui-svelte/reset.css'; /* Dont use if you already have a reset in your project. Ej: Using TailwindCSS */
import 'fluentui-svelte/typography.css';
import 'fluentui-svelte/media-darkmode.css'; /* Or:  import 'fluentui-svelte/class-darkmode.css' */

Configuración del Proveedor

Envuelve tu aplicación con el proveedor FluentUISvelte en tu archivo raíz +layout.svelte para crear el contexto compartido que los componentes leen para el tema, el movimiento reducido y la navegación por teclado:

<script>
  import { FluentUISvelte } from 'fluentui-svelte';

  let { children } = $props();
</script>

<FluentUISvelte>
  {@render children?.()}
</FluentUISvelte>

El proveedor es opcional, pero algunas funcionalidades solo funcionan mientras está montado:

  • Tema: el tema actual se comparte a través del proveedor, así que todos los componentes reaccionan al mismo tiempo cuando cambia.
  • Movimiento reducido: el proveedor guarda la preferencia elegida dentro de tu aplicación y recurre a la configuración del sistema operativo. Sin él, los componentes solo pueden seguir la configuración del sistema.
  • Navegación por teclado: las flechas y el foco itinerante en componentes como el auto suggest box, el calendar view y el dropdown dependen de la instancia de Tabspot que crea el proveedor.

Importar Componentes

Para usar los componentes de FluentUI Svelte, debes importarlos en tus archivos Svelte. Aquí tienes un ejemplo de cómo importar y usar un componente Button:

<script>
  import { Button } from 'fluentui-svelte';
</script>

Importar como Espacio de Nombres

También puedes importar todos los componentes como un espacio de nombres, lo que te permite acceder a ellos con un prefijo:

<script>
  import * as FluentUISvelte from 'fluentui-svelte';
</script>

<FluentUISvelte.Button>
  Click me
</FluentUISvelte.Button>