Blips
Documentação

Hover Card

Permite que usuários com visão visualizem o conteúdo disponível por trás de um link.

Carregando…
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";
import { Button } from "@blips/ui/components/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@blips/ui/components/hover-card";
import { Calendar } from "@phosphor-icons/react";

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between gap-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="text-xs text-muted-foreground">
              Joined December 2021
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Instalação

pnpm add @blips/ui

Uso

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@blips/ui/components/hover-card"
<HoverCard>
  <HoverCardTrigger>Passe o mouse</HoverCardTrigger>
  <HoverCardContent>
    O framework React – criado e mantido por @vercel.
  </HoverCardContent>
</HoverCard>

Atrasos de acionamento

Use openDelay e closeDelay no HoverCard para controlar quando o card abre e fecha.

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>Passe o mouse</HoverCardTrigger>
  <HoverCardContent>Conteúdo</HoverCardContent>
</HoverCard>

Posicionamento

Use as props side e align no HoverCardContent para controlar o posicionamento.

<HoverCard>
  <HoverCardTrigger>Passe o mouse</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Conteúdo
  </HoverCardContent>
</HoverCard>

Exemplos

Básico

Pré-visualização de conteúdo disponível por trás de um link.

Carregando…
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";
import { Button } from "@blips/ui/components/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@blips/ui/components/hover-card";
import { Calendar } from "@phosphor-icons/react";

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between gap-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="text-xs text-muted-foreground">
              Joined December 2021
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Referência da API

Consulte a documentação do Radix UI para mais informações.

AnteriorFormPróximoInput