Hoja de compartir
Una hoja que sube desde abajo con contactos, apps y un botón de copiar enlace que lo confirma.
Ajustes
Código
<div class="uv-osh"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Compartir</button><div class="scr"></div><div class="sh" role="dialog" aria-modal="true" aria-label="Compartir"><i class="gr" aria-hidden="true"></i><div class="hd"><span class="th" aria-hidden="true"></span><span><b>Ruta por los Picos de Europa</b><small>rutas.app/picos</small></span></div><div class="pp"><button type="button"><span class="av" style="--c:#f97316">A</span>Ana</button><button type="button"><span class="av" style="--c:#3b82f6">L</span>Leo</button><button type="button"><span class="av" style="--c:#ec4899">S</span>Sara</button><button type="button"><span class="av" style="--c:#10b981">I</span>Iván</button><button type="button"><span class="av" style="--c:#a855f7">N</span>Noa</button></div><div class="ap"><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Mensajes</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M4 7l8 6 8-6"/></svg>Correo</button><button type="button" class="cp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg><span class="a">Copiar enlace</span><span class="b">Copiado</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/></svg>Más</button></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Compartir funciona mejor cuando los destinos más probables están a un toque. Esta hoja inferior sube con un tirador, una vista previa de lo que se comparte, una fila de contactos recientes con avatares de color y otra de acciones para mensajes, correo, copiar enlace y más. Al copiar, el enlace pasa al portapapeles y el botón se vuelve verde con una confirmación.
Es un diálogo modal que lleva el foco dentro al abrirse y se cierra con Escape o tocando el fondo. Las filas se desplazan en horizontal en pantallas pequeñas y el color principal tiñe los iconos de acción.