Alain Afflelou Design System

Tag List 

<div x-ref="tagsSwiper" x-data="plpTags" class="swiper mx-0 md:-ml-5 md:pl-5 md:pr-5
            md:before:absolute md:before:bg-gradient-to-l md:before:from-transparent md:before:left-0 md:before:w-5 md:before:h-full md:before:z-10 md:before:top-0
            md:after:absolute md:after:bg-gradient-to-r md:after:from-transparent md:after:right-0 md:after:w-5 md:after:h-full md:after:z-10 md:after:top-0
            md:before:to-white md:after:to-white overflow-visible md:overflow-hidden">
    <div class="swiper-wrapper">
        <div class="swiper-slide w-auto">
            <a href="#" class=" btn btn-dark-ghost ">
                Tag

            </a>
        </div>
        <div class="swiper-slide w-auto">
            <a href="#" class=" btn btn-dark-ghost ">
                Tag

            </a>
        </div>
        <div class="swiper-slide w-auto">
            <a href="#" class=" btn btn-dark-ghost ">
                Tag

            </a>
        </div>
        <div class="swiper-slide w-auto">
            <a href="#" class=" btn btn-dark-ghost ">
                Tag

            </a>
        </div>
    </div>
</div>

<script>
    'use strict';

    function plpTags() {
        return {
            swiper: {},
            init() {
                this.swiper = new Swiper(this.$refs.tagsSwiper, {
                    slidesPerView: 'auto',
                    spaceBetween: 8,
                    freeMode: true,
                });
            }
        }
    }
</script>
 
<div x-ref="tagsSwiper" x-data="plpTags" class="swiper mx-0 md:-ml-5 md:pl-5 md:pr-5
            md:before:absolute md:before:bg-gradient-to-l md:before:from-transparent md:before:left-0 md:before:w-5 md:before:h-full md:before:z-10 md:before:top-0
            md:after:absolute md:after:bg-gradient-to-r md:after:from-transparent md:after:right-0 md:after:w-5 md:after:h-full md:after:z-10 md:after:top-0
            {{ container_classes|default('md:before:to-white md:after:to-white overflow-visible md:overflow-hidden') }}">
    <div class="swiper-wrapper">
        {% for tag in tags %}
            <div class="swiper-slide w-auto">
                {% render "@template-button" with tag|merge({color: color|default('dark') ~ '-ghost'}) %}
            </div>
        {% endfor %}
    </div>
</div>

<script>
    'use strict';
    function plpTags() {
        return {
            swiper: {},
            init() {
                this.swiper = new Swiper(this.$refs.tagsSwiper, {
                    slidesPerView: 'auto',
                    spaceBetween: 8,
                    freeMode: true,
                });
            }
        }
    }
</script>
 
{
  "tags": [
    {
      "label": "Tag",
      "href": "#"
    },
    {
      "label": "Tag",
      "href": "#"
    },
    {
      "label": "Tag",
      "href": "#"
    },
    {
      "label": "Tag",
      "href": "#"
    }
  ]
}

Tag List Component Guide

How to use

Import

{% render "@tag-list" with {...} %}

Available props

  • tags: array | default: []

    • List of tag objects to display in the swiper.
    • Each item in the array is passed to the @template-button component. For more details on the structure of each item, see the @template-button documentation.

  • color: string | default: dark

    • Defines the color of the tag (used with -ghost for a ghost-style effect).
    • Possible values: dark, light, audio, etc.

  • container_classes: string | default: md:before:to-white md:after:to-white overflow-visible md:overflow-hidden

    • Additional CSS classes to customize the appearance of the swiper’s borders and gradient effects.
    • Used to personalize the visual behavior of before and after elements.

Description

The Tag list component displays a scrolling list of tags in swiper mode with stylized buttons. It uses the Swiper JavaScript library to provide smooth horizontal scrolling and dynamic tag display.

Javascript Behavior

This component uses an Alpine.js function plpTags to initialize the swiper and configure its options:

  • swiper: Swiper instance used to control the scrolling of tags.
  • init(): Initializes the Swiper instance with the following options:
    • slidesPerView: 'auto': Displays tags based on their width.
    • spaceBetween: 8: Sets an 8-pixel space between each tag.
    • freeMode: true: Enables a free scrolling mode allowing users to scroll through tags without forced alignment.