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.

Extras opcionales

Todo lo de esta sección es opcional. Puedes omitirlo y FluentUI Svelte funciona igual; vuelve cuando lo necesites.

Archivos CSS opcionales

Opcional

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' */

Opcional: iconos de Fluent UI

Opcional

FluentUI Svelte ya depende de fluentui-icons-svelte, más de 6,000 iconos de Fluent UI como componentes de Svelte 5. Instálalo en tu app para usar los iconos tú mismo, por ejemplo dentro de un botón o una insignia. Los gestores de paquetes que no elevan las dependencias, como pnpm, solo te dejan importarlo si es una dependencia directa.

  1. Instala los iconos

    NPM:

    npm i -D fluentui-icons-svelte

    Yarn:

    yarn add -D fluentui-icons-svelte

    PNPM:

    pnpm add -D fluentui-icons-svelte

  2. Importa un icono y úsalo

    Importa cada icono desde su propio archivo, que compila más rápido en desarrollo, y ajusta su tamaño o color con props:

    <script>
  import AddRegular from 'fluentui-icons-svelte/AddRegular.svelte';
</script>

<AddRegular width="24" height="24" />
    Ver todos los iconos

Opcional: Selawik como fuente alternativa

Opcional

Opcionalmente, puedes incorporar Selawik, una alternativa de código abierto a Segoe UI, para obtener una apariencia similar en sistemas donde Segoe UI no está instalada. Los archivos de la fuente no están incluidos en el paquete npm.

  1. Descarga los archivos de la fuente

    Descarga los archivos de la fuente y colócalos en static/fonts/selawik/ en tu proyecto SvelteKit, para servirlos desde /fonts/selawik/. Conserva el archivo de licencia, incluido su aviso de derechos de autor, junto con las fuentes al distribuirlas. En otros frameworks, usa el directorio equivalente de recursos públicos:

  2. Declara las variantes de la fuente

    Agrega estas declaraciones a tu archivo global src/app.css. Usa el mismo nombre de familia para los pesos regular (400), seminegrita (600) y negrita (700):

    @font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawk.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawksb.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawkb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  3. Importa la hoja de estilos

    Importa tu hoja de estilos global en src/routes/+layout.svelte, junto con la hoja de estilos del tema. Incluye la hoja de estilos opcional typography.css para aplicar las fuentes del tema en toda tu aplicación:

    import 'fluentui-svelte/theme.css';
import 'fluentui-svelte/typography.css';
import '../app.css';

    El tema ya define --fs-font-family-base con Segoe UI primero y Selawik en --fs-font-family-fallback, por lo que no necesitas sobrescribir las variables de fuente. Segoe UI mantiene la prioridad cuando está disponible. Si tu aplicación usa una ruta base o sirve recursos desde otra URL, ajusta las URL de las fuentes según corresponda.

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>
Editar este documento