FlipView

Un FlipView muestra un elemento a la vez, como imágenes o secciones, y permite pasar de uno a otro con los botones, deslizando, con la rueda del ratón o con el teclado.

Uso

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

<FlipView aria-label="Landscapes" style="height: 14rem;">
  <img src="/one.jpg" alt="One" />
  <img src="/two.jpg" alt="Two" />
  <img src="/three.jpg" alt="Three" />
</FlipView>

Orientación

orientation pasa los elementos en horizontal (por defecto) o en vertical.

Ver Código

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

<FlipView aria-label="Horizontal" style="height: 12rem;">…</FlipView>
<FlipView aria-label="Vertical" orientation="vertical" style="height: 12rem;">…</FlipView>

Cualquier contenido

Cada hijo directo es un elemento: imágenes, videos o secciones completas.

Ver Código

<script>
  import { FlipView, MediaPlayer } from 'fluentui-svelte';
</script>

<FlipView aria-label="Steps" style="height: 12rem;">
  <section>
    <h3>Design</h3>
    <p>Fluent 2 tokens, materials and motion.</p>
  </section>
  <section>…</section>
  <MediaPlayer label="Video" src="video.mp4" poster="poster.jpg" layout="compact" />
</FlipView>

Design

Fluent 2 tokens, materials and motion.

Build

Svelte 5 components with native forms.

Ship

Accessible by default, light and dark.

Elemento seleccionado

Usa bind:index para leer o cambiar el elemento visible.

Ver Código

<script>
  import { FlipView, Button } from 'fluentui-svelte';
  const photos = ['1506905925346-21bda4d32df4', '1501785888041-af3ef285b470', '1470071459604-3b5ec3a7fe05'];
  let index = $state(0);
</script>

<FlipView aria-label="Landscapes" bind:index style="height: 12rem;">
  {#each photos as id, i (id)}
    <img src="https://images.unsplash.com/photo-{id}?w=768&h=384&fit=crop&q=70" alt="Landscape {i + 1}" />
  {/each}
</FlipView>
{#each photos as _, i}
  <Button appearance={i === index ? 'accent' : 'standard'} onclick={() => (index = i)}>{i + 1}</Button>
{/each}

Teclado y accesibilidad

Enfoca el FlipView y usa las flechas, Inicio y Fin. Los elementos ocultos son inertes. Ponle nombre con aria-label.

Propiedades del componente

Name	Type	Default	Description
`index` bindable	`number`	`0`	El índice del elemento visible.
`orientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	La dirección en la que pasan los elementos.
`previousLabel`	`string`	`'Previous'`	Nombre accesible del botón anterior.
`nextLabel`	`string`	`'Next'`	Nombre accesible del botón siguiente.
`onIndexChange`	`(index: number) => void`		Se llama cuando cambia el elemento visible.
`ref` bindable	`HTMLDivElement` \| `null`		El elemento raíz.
`viewportRef` bindable	`HTMLDivElement` \| `null`		El elemento que contiene y desplaza los elementos.
Element Attributes (`div`)

Componentes

FlipView

Uso

Orientación

Cualquier contenido

Design

Build

Ship

Elemento seleccionado

Teclado y accesibilidad

Propiedades del componente