Block Scrollspy

{# derafu_twig:templates/pages/components/block-scrollspy.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}

{# Define the contents for the sections #}
{% set section_content_introduccion %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="https://www.example.com/" target="_blank">Quisquam, quos.</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_features %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
{% endset %}

{% set section_content_options %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_usage %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ol>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_advanced %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{# Example 1: Vertical Scrollspy #}
<twig:block-scrollspy
    class="my-4 shadow-none"
    style="--scrollspy-list-active-bg: #0066cc;"
    height="100vh"
    :cols="3"
    :sections="[
        {
            id: 'introduction',
            title: 'Lorem ipsum dolor sit amet',
            content: section_content_introduction
        },
        {
            id: 'features',
            title: 'Lorem',
            content: section_content_features
        },
        {
            id: 'options',
            title: 'Lorem',
            content: section_content_options
        }
    ]"
/>

<hr class="my-4"/>

{# Example 2: Horizontal Scrollspy #}
<twig:block-scrollspy
    class="my-4 shadow "
    style="--scrollspy-list-active-bg: #6610f2;"
    height="300px"
    orientation="horizontal"
    :cols="12"
    :sections="[
        {
            id: 'introduction-h',
            title: 'Lorem ipsum dolor sit amet',
            content: section_content_introduction,
        },
        {
            id: 'features-h',
            title: 'Lorem',
            content: section_content_features,
        },
        {
            id: 'options-h',
            title: 'Lorem',
            content: section_content_options,
        },
            {
            id: 'usage-h',
            title: 'Lorem',
            content: section_content_usage,
        }
    ]"
/>

{% endblock %}