Tag Group

<gstock-tag-group> | GstockTagGroup

Examples

De forma predeterminada, un grupo de etiquetas organiza una colección de etiquetas de izquierda a derecha. Gestiona el desbordamiento pasando a la siguiente línea.

Las etiquetas dentro de un grupo de etiquetas deben ser del mismo tipo para brindar una experiencia de usuario consistente.

JavaScript

TypeScript

React

Vue

<gstock-tag-group>
  <gstock-tag>JavaScript</gstock-tag>
  <gstock-tag>TypeScript</gstock-tag>
  <gstock-tag>React</gstock-tag>
  <gstock-tag>Vue</gstock-tag>
</gstock-tag-group>

Con estados mixtos

Las etiquetas dentro del grupo pueden tener diferentes estados.

Frontend

Backend

DevOps

Mobile

Data Science

<gstock-tag-group>
  <gstock-tag active>Frontend</gstock-tag>
  <gstock-tag>Backend</gstock-tag>
  <gstock-tag>DevOps</gstock-tag>
  <gstock-tag active>Mobile</gstock-tag>
  <gstock-tag>Data Science</gstock-tag>
</gstock-tag-group>

Grupo de filtros interactivos

Ejemplo de uso como sistema de filtros con JavaScript.

Precio

Categoría

Marca

Disponibilidad

<gstock-tag-group>
  <gstock-tag onclick="toggleFilter(this)" label="Filtrar por precio">Precio</gstock-tag>
  <gstock-tag onclick="toggleFilter(this)" label="Filtrar por categoría">Categoría</gstock-tag>
  <gstock-tag onclick="toggleFilter(this)" label="Filtrar por marca">Marca</gstock-tag>
  <gstock-tag onclick="toggleFilter(this)" label="Filtrar por disponibilidad">
    Disponibilidad
  </gstock-tag>
</gstock-tag-group>

<script>
  function toggleFilter(tag) {
    tag.active = !tag.active;

    // Obtener todos los filtros activos
    const tagGroup = tag.closest('gstock-tag-group');
    const activeFilters = tagGroup.querySelectorAll('gstock-tag[active]');

    console.log(
      'Filtros activos:',
      Array.from(activeFilters).map(t => t.textContent.trim()),
    );
  }
</script>

Con enlaces

Las etiquetas del grupo pueden ser enlaces a diferentes secciones o páginas.

Productos

Servicios

Contacto

Blog

<gstock-tag-group>
  <gstock-tag href="#productos">Productos</gstock-tag>
  <gstock-tag href="#servicios">Servicios</gstock-tag>
  <gstock-tag href="#contacto">Contacto</gstock-tag>
  <gstock-tag href="https://blog.example.com" label="Ir al blog">Blog</gstock-tag>
</gstock-tag-group>

Categorías de contenido

Ejemplo de uso para mostrar categorías o temas relacionados.

Tecnologías Frontend:

HTML

CSS

JavaScript

TypeScript

Frameworks:

React

Vue.js

Angular

Svelte

<h4>Tecnologías Frontend:</h4>
<gstock-tag-group>
  <gstock-tag>HTML</gstock-tag>
  <gstock-tag>CSS</gstock-tag>
  <gstock-tag>JavaScript</gstock-tag>
  <gstock-tag active>TypeScript</gstock-tag>
</gstock-tag-group>

<h4>Frameworks:</h4>
<gstock-tag-group>
  <gstock-tag>React</gstock-tag>
  <gstock-tag active>Vue.js</gstock-tag>
  <gstock-tag>Angular</gstock-tag>
  <gstock-tag>Svelte</gstock-tag>
</gstock-tag-group>

Selección múltiple

Ejemplo avanzado que permite selección múltiple con feedback visual.

Selecciona tus habilidades (click para seleccionar/deseleccionar):

JavaScript

Python

React

Node.js

CSS

Habilidades seleccionadas: Ninguna

<p>Selecciona tus habilidades (click para seleccionar/deseleccionar):</p>
<gstock-tag-group>
  <gstock-tag onclick="handleSkillSelection(this)" label="Seleccionar JavaScript">
    JavaScript
  </gstock-tag>
  <gstock-tag onclick="handleSkillSelection(this)" label="Seleccionar Python">Python</gstock-tag>
  <gstock-tag onclick="handleSkillSelection(this)" label="Seleccionar React">React</gstock-tag>
  <gstock-tag onclick="handleSkillSelection(this)" label="Seleccionar Node.js">Node.js</gstock-tag>
  <gstock-tag onclick="handleSkillSelection(this)" label="Seleccionar CSS">CSS</gstock-tag>
</gstock-tag-group>

<div id="selected-skills" class="skills-selection">
  <strong>Habilidades seleccionadas:</strong>
  <span id="skills-list">Ninguna</span>
</div>

<script>
  function handleSkillSelection(tag) {
    tag.active = !tag.active;

    // Actualizar lista de habilidades seleccionadas
    const tagGroup = tag.closest('gstock-tag-group');
    const selectedTags = tagGroup.querySelectorAll('gstock-tag[active]');
    const skillsList = document.getElementById('skills-list');

    if (selectedTags.length === 0) {
      skillsList.textContent = 'Ninguna';
    } else {
      skillsList.textContent = Array.from(selectedTags)
        .map(t => t.textContent.trim())
        .join(', ');
    }
  }
</script>

<style>
  .skills-selection {
    margin-top: 16px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
  }
</style>