Vitral 0.2
Sobreposição

HoverCard

Uma prévia do destino de um link, mostrada enquanto o ponteiro repousa sobre ele ou o foco chega nele.

Testado com WAI-ARIA

Importação

main.ts
import { HoverCard } from '@vitral/vue';

Básico

Built by @vitral and friends. 

<script setup lang="ts">import { Avatar, HoverCard } from '@vitral/vue';</script> <template>    <p style="margin: 0">        Built by        <HoverCard>            <template #trigger><a href="#">@vitral</a></template>            <div style="display: flex; gap: 0.75rem">                <Avatar label="V" shape="circle" />                <div>                    <strong>Vitral</strong>                    <p style="margin: 0.25rem 0 0; font-size: 0.8125rem">One component set for Vue, themeable from tokens to pass-through.</p>                </div>            </div>        </HoverCard>        and friends.    </p></template>

Posicionamento e atrasos

Faster, to the right
<script setup lang="ts">import { HoverCard } from '@vitral/vue';</script> <template>    <HoverCard placement="right" :open-delay="200" :close-delay="100">        <template #trigger><a href="#">Faster, to the right</a></template>        <img src="https://picsum.photos/id/1025/320/180" alt="A pug wrapped in a blanket" style="display: block; width: 100%; border-radius: 6px" />    </HoverCard></template>

API

Lido de packages/vue/src/components/HoverCard/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
openDelaynumberMilissegundos em que o ponteiro (ou o foco do teclado) repousa antes de o card abrir. O padrão é 700.
closeDelaynumberMilissegundos depois que o ponteiro sai antes de fechar. O padrão é 300.
placementOverlayPlacementOnde abre em relação ao gatilho. O padrão é `'bottom'`.
offsetnumberDistância até o gatilho, em pixels. O padrão é 8.
disabledboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
show——
hide——

Slots

NomeProps do slotDescrição
trigger—O que abre o card, normalmente um link, que continua funcionando por si.
default—O conteúdo do card: uma prévia daquilo para onde o gatilho aponta.