Card

Una card es un contenedor que agrupa contenido y acciones sobre un mismo tema, y que opcionalmente se puede seleccionar.

FluentUI Svelte

5h ago · About us - Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Una card se construye con los siguientes componentes:

Card: El componente raíz. Crea todo el estado, provee el contexto a sus partes y gestiona la selección.
CardPreview: El contenido multimedia que se muestra en uno de los extremos de la card, con un logo opcional superpuesto.
CardHeader: El título de la card, con una imagen, una descripción y una acción opcionales.
CardFooter: Las acciones que se muestran en la parte inferior de la card.

Uso

<script>
	import { Card, CardPreview, CardHeader, CardFooter, Button } from 'fluentui-svelte';
</script>

{#snippet footerActions()}
	<Button>Like</Button>
	<Button appearance="standard">Share</Button>
{/snippet}

<Card orientation="vertical">
	<CardPreview logoSrc="/logo.png">
		<img src="/preview.png" alt="Preview" />
	</CardPreview>
	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<CardFooter action={footerActions} />
</Card>

Apariencia

Una card puede tener su fondo y sus bordes estilizados para dar mayor énfasis o para verse más sutil.

Ver Código

<Card appearance="filled">Filled</Card>
<Card appearance="outlined">Outlined</Card>
<Card appearance="subtle">Subtle</Card>

Filled

Outlined

Subtle

Orientación

Por defecto una card distribuye sus partes en horizontal. Usa orientation vertical para apilarlas.

Ver Código

<Card orientation="horizontal">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
  <CardHeader title="Horizontal" description="The default orientation" />
</Card>

<Card orientation="vertical">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
  <CardHeader title="Vertical" description="Stacks every part" />
</Card>

Horizontal

The default orientation

Vertical

Stacks every part

Selección

Una card seleccionable alterna su selección al hacer clic en cualquier punto, y la reporta mediante onSelectionChange. Usa showFloatingAction para flotar una casilla sobre la esquina superior derecha. Una card no puede ser seleccionable y un enlace a la vez.

Ver Código

<script>
  let selected = $state(false);
</script>

<Card selectable showFloatingAction bind:selected onSelectionChange={(id, selected) => console.log(id, selected)}>
  <CardHeader title="Selectable card" description={selected ? 'Selected' : 'Not selected'} />
</Card>

Selectable card

Not selected

Encabezado

El encabezado recibe un título, y opcionalmente una imagen, una descripción y una acción. Un título de tipo string se renderiza dentro de un encabezado; un snippet o un componente recibe el id con el que se etiqueta la casilla flotante. La acción no está disponible en cards seleccionables.

Ver Código

{#snippet title(attrs)}
  <h4 class="body" {...attrs}><b>FluentUI Svelte</b> mentioned you</h4>
{/snippet}

{#snippet action()}
  <Button appearance="subtle" aria-label="More actions"><MoreHorizontalRegular width="1em" height="1em" /></Button>
{/snippet}

<Card>
  <CardHeader image="/logo.png" {title} description="5h ago · About us - Overview" {action} />
</Card>

FluentUI Svelte mentioned you

5h ago · About us - Overview

Vista previa

La vista previa contiene el contenido multimedia de la card y redondea las esquinas contra las que se apoya. La prop logoSrc superpone un logo en la esquina inferior izquierda.

Ver Código

<Card orientation="vertical">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
</Card>

Pie

El pie renderiza las acciones de la card en la parte inferior, repartidas a lo ancho del espacio disponible.

Ver Código

{#snippet action()}
  <Button>Like</Button>
  <Button appearance="standard">Share</Button>
{/snippet}

<Card orientation="vertical">
  <CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
  <CardFooter {action} />
</Card>

FluentUI Svelte

5h ago · About us - Overview

Propiedades del componente (Card)

Name	Type	Default	Description
`ref` bindable	`CardElementDOMType[Tag]`		La referencia del DOM del elemento card.
`as`	`'div'` \| `'article'` \| `'section'` \| `'a'`	`'div'`	El elemento del DOM que se renderiza.
`orientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	El eje sobre el que la card distribuye sus partes.
`selectable`	`boolean`	`false`	Permite al usuario seleccionar la card haciendo clic en cualquier punto.
`showFloatingAction`	`boolean`	`false`	Flota la casilla de selección sobre la esquina superior derecha de la card.
`id`	`string`		El id del elemento card. Si no se indica, se genera uno.
`selected` bindable	`boolean`	`false`	Indica si la card está seleccionada. Solo disponible en cards seleccionables.
`disabled`	`boolean`	`false`	Deshabilita la interacción del usuario.
`appearance`	`'filled'` \| `'outlined'` \| `'subtle'`	`'filled'`	Una card puede tener su fondo y sus bordes estilizados para dar mayor énfasis o para verse más sutil.
`onSelectionChange`	`(id: string, selected: boolean) => void`		Se llama con el id de la card cada vez que cambia su selección.
HTML Attributes

Propiedades del componente (CardPreview)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		La referencia del DOM del elemento de la vista previa.
`logoSrc`	`string`		La URL del logo que se superpone en la esquina inferior izquierda de la vista previa.
`logoAlt`	`string`	`''`	El texto alternativo del logo. Vacío por defecto, lo que marca el logo como decorativo.
`children`	`Snippet`		El contenido multimedia de la vista previa, normalmente una imagen.
`HTMLAttributes<HTMLDivElement>` without `children`

Propiedades del componente (CardHeader)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		La referencia del DOM del elemento del encabezado.
`title`	`Snippet` \| `Component` \| `string`		El título de la card. Un snippet o un componente recibe el id con el que se etiqueta la casilla flotante.
`image`	`Snippet` \| `Component` \| `string`		La imagen que se renderiza antes del título. Un string se usa como `src` de un `<img>`.
`imageAlt`	`string`	`''`	El texto alternativo de una imagen en string. Vacío por defecto, lo que marca la imagen como decorativa.
`description`	`Snippet` \| `Component` \| `string`		Una segunda línea de texto debajo del título.
`action`	`Snippet` \| `Component`		La acción que se renderiza al final del encabezado. No está disponible en cards seleccionables.
`HTMLAttributes<HTMLDivElement>` without `children`, `title`

Propiedades del componente (CardFooter)

Name	Type	Description
`ref` bindable	`HTMLDivElement`	La referencia del DOM del elemento del pie.
`action`	`Snippet` \| `Component`	Las acciones que se renderizan dentro del pie. No están disponibles en cards seleccionables.
`HTMLAttributes<HTMLDivElement>` without `children`