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

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>