Alain Afflelou Design System

Toggle 

<div class="p-8">
    <div class="bg-[#D7D7D7] grid grid-cols-2 gap-4 rounded-lg m-8 p-8">
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-classic  ">
                toggle label
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-classic active ">
                toggle active
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-audio  ">
                toggle label
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-audio active ">
                toggle active
            </a>
        </div>
    </div>

    <div class="bg-[#323232] grid grid-cols-2 gap-4 rounded-lg m-8 p-8">
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-classic  ">
                toggle label
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-classic active ">
                toggle active
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-audio  ">
                toggle label
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="" class="toggle-magic toggle-magic-audio active ">
                toggle active
            </a>
        </div>
    </div>
</div>
 
<div class="p-8">
    <div class="bg-[#D7D7D7] grid grid-cols-2 gap-4 rounded-lg m-8 p-8">
        {% for toggle in lightToggles %}
            {% include '@template-magic_toggle' with toggle %}
        {% endfor %}
    </div>

    <div class="bg-[#323232] grid grid-cols-2 gap-4 rounded-lg m-8 p-8">
        {% for toggle in darkToggles %}
            {% include '@template-magic_toggle' with toggle %}
        {% endfor %}
    </div>
</div>
 
{
  "lightToggles": [
    {
      "label": "toggle label"
    },
    {
      "label": "toggle active",
      "active": "true"
    },
    {
      "label": "toggle label",
      "state": "audio"
    },
    {
      "label": "toggle active",
      "state": "audio",
      "active": "true"
    }
  ],
  "darkToggles": [
    {
      "label": "toggle label",
      "color": "dark"
    },
    {
      "label": "toggle active",
      "color": "dark",
      "active": "true"
    },
    {
      "label": "toggle label",
      "state": "audio",
      "color": "dark"
    },
    {
      "label": "toggle active",
      "state": "audio",
      "color": "dark",
      "active": "true"
    }
  ]
}

No notes defined.