Ejemplos

Uso básico

El componente sin ningún atributo usa valores por defecto.

html

<comment-section></comment-section>

Tema claro

Cambia el fondo a blanco con theme="light".

html

<comment-section theme="light"></comment-section>

Máximo personalizado

Controla cuántos comentarios se muestran antes de "Ver más".

html

<comment-section max-comments="9" placeholder="Danos tu feedback..."></comment-section>

Límite de caracteres

Reduce el máximo de caracteres por comentario.

html

<comment-section char-limit="100"></comment-section>

Con datos iniciales

Carga comentarios existentes desde JavaScript.

html

<script>
  const el = document.querySelector("comment-section");
  el.initialComments = [
    {
      id: "1",
      text: "Primer comentario de ejemplo",
      date: "2025-03-10T08:00:00Z",
      name: "María García",
      avatar: "https://i.pravatar.cc/80?u=maria",
      emoji: "⭐"
    },
    {
      id: "2",
      text: "Esto funciona genial en producción",
      date: "2025-03-10T09:30:00Z",
      name: "Carlos López",
      avatar: "https://i.pravatar.cc/80?u=carlos",
      emoji: "🎉"
    }
  ];
</script>

Todas las props combinadas

html

<comment-section
  max-comments="12"
  placeholder="Tu opinión nos importa..."
  theme="light"
  char-limit="300"
></comment-section>

CDN vía unpkg

Para usar sin npm, carga desde unpkg.com.

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Comentarios</title>
</head>
<body>
  <h1>Mi sitio</h1>
  <comment-section
    max-comments="9"
    placeholder="Deja tu comentario..."
    theme="dark"
  />
  <script src="https://unpkg.com/comment-section@0.1.0"></script>
</body>
</html>