bootstrap_italia-8.x-0.x-dev/components/components-2/dropdown/dropdown-demo.html.twig

{#
/**
 * @file
 * Alert demo.
 *
 * Example:
 *
   {% include '@bi-bcl/dropdown/dropdown-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set variants = ["dropdown", "primary", "secondary", "danger"] %}
  {% set directions = ["up", "end", "down", "start"] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Dropdown variant'|t,
    path_demo_code: '/dropdown/dropdown-demo.html.twig#L22',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
          label: 'Dropdown '~variant|t,
          variant: variant,
          button_classes: ['m-1', 'mb-5'],
        } %}
          {% block dropdownContent %}
            <div class="link-list-wrapper">
              <ul class="link-list">
                <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
              </ul>
            </div>
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Dropdown link'|t,
    path_demo_code: '/dropdown/dropdown-demo.html.twig#L47',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
          label: 'Dropdown '~variant|t,
          tag: 'a',
          variant: variant,
          button_classes: ['m-1', 'mb-5'],
        } %}
          {% block dropdownContent %}
            <div class="link-list-wrapper">
              <ul class="link-list">
                <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
              </ul>
            </div>
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Dropdown direction'|trans,
    path_demo_code: '/dropdown/dropdown-demo.html.twig#L74',
  } %}
    {% block content %}
      {% for direction in directions %}
        <div class="d-flex justify-content-center">
          {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
            label: 'Dropdown '~direction|trans,
            direction: direction,
            hide_block_after: direction == 'start' ? true,
            button_classes: ['m-1', 'mb-5', direction == 'start' ? 'align-right'],
          } %}
            {% block dropdownContent %}
              <div class="link-list-wrapper">
                <ul class="link-list">
                  <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
                  <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
                  <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
                </ul>
              </div>
            {% endblock %}
          {% endembed %}
        </div>
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Dropdown dark variant'|trans,
    path_demo_code: '/dropdown/dropdown-demo.html.twig#L101',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
          label: 'Dropdown '~variant|trans,
          variant: variant,
          dropdown_dark: true,
          button_classes: ['m-1', 'mb-5'],
        } %}
          {% block dropdownContent %}
            <div class="link-list-wrapper">
              <ul class="link-list">
                <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
              </ul>
            </div>
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Dropdown with icon'|t,
    path_demo_code: '/dropdown/dropdown-demo.html.twig#L127',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
          label: 'Dropdown '~variant|t,
          variant: variant,
          icon_before: 'it-user',
          icon_before_rounded: true,
          icon_color: 'white',
          button_classes: ['m-1', 'mb-5'],
        } %}
          {% block dropdownContent %}
            <div class="link-list-wrapper">
              <ul class="link-list">
                <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
                <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
              </ul>
            </div>
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

{% endapply %}