Primitivedata-display

Iphone

Stable

A mockup of the iPhone

Instalação

npx up-web-ds add iphone

Preview

Default

Video

All states

Default

Video

Usage

@/components/ui/iphone
import { Iphone } from '@/components/ui/iphone'
Iphone
<Iphone src={screen} className="max-w-72" />

Props

Props de Iphone
PropTypeDefaultDescription
srcstringsem valor padrão
videoSrcstringsem valor padrão

Estende IphoneProps. Aceita também os atributos padrão de um elemento React (278 não listados).

Metadata

Notas de acessibilidade

Verificado em iphone.test.tsx e tests/e2e/iphone.spec.ts no Chromium desktop e mobile. O mockup é apresentação: não cria papel nem parada de tabulação, o chrome SVG fica aria-hidden e imagem e vídeo são decorativos dentro da moldura. Teclado e toque continuam destinados ao conteúdo ao redor. O vídeo é muted, playsInline e tabIndex={-1}; sob prefers-reduced-motion: reduce, autoplay e loop são removidos, deixando o primeiro quadro estático. IDs de máscara são únicos por instância, evitando colisões entre aparelhos na mesma página.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
magic registry / iphone
Licença
MIT
URL
https://magicui.design/r/iphone.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda