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

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

  {% set variants = [
    "primary", "secondary", "success", "danger", "warning"
  ] %}


  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Chips standard and big'|t,
    path_demo_code: '/chip/chip-demo.html.twig#L28',
  } %}
    {% block content %}

      <div class="row">

        <div class="col-12 col-md-6">
          <p class="mt-4 mb-2">{{ 'Only text'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
          } %}

          <p class="mt-4 mb-2">{{ 'Dismissible'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
            chip_dismissibile: true,
          } %}

          <p class="mt-4 mb-2">{{ 'Dismissible with icon'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
            chip_dismissibile: true,
            chip_icon: 'it-github',
          } %}

          <p class="mt-4 mb-2">{{ 'Dismissible with avatar'|t }}</p>
          {% embed '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'label'|t,
            chip_dismissibile: true,
          } %}
            {% block beforeContent %}
              {% embed '@bi-bcl/avatar/avatar.html.twig' with {
                avatar_size: 'xs'
              } %}
                {% block avatarContent %}
                  <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero chip picture">
                {% endblock %}
              {% endembed %}
            {% endblock %}
          {% endembed %}

        </div>{# End Standard. #}

        <div class="col-12 col-md-6">

          <p>{{ 'Only text'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
            chip_large: true
          } %}

          <p class="mt-4 mb-2">{{ 'Dismissible'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
            chip_dismissibile: true,
            chip_large: true
          } %}


          <p class="mt-4 mb-2">{{ 'Dismissible with icon'|t }}</p>
          {% include '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'Label'|t,
            chip_dismissibile: true,
            chip_icon: 'it-github',
            chip_large: true
          } %}

          <p class="mt-4 mb-2">{{ 'Dismissible with avatar'|t }}</p>
          {% embed '@bi-bcl/chip/chip.html.twig' with {
            chip_label: 'label'|t,
            chip_dismissibile: true,
            chip_large: true
          } %}
            {% block beforeContent %}
              {% embed '@bi-bcl/avatar/avatar.html.twig' with {
                avatar_size: 'xs'
              } %}
                {% block avatarContent %}
                  <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero">
                {% endblock %}
              {% endembed %}
            {% endblock %}
          {% endembed %}

        </div>{# End big variant. #}
      </div>{# End row. #}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Chip color'|t,
    path_demo_code: '/chip/chip-demo.html.twig#L117',
  } %}
    {% block content %}

      {% for variant in variants %}
        {% include '@bi-bcl/chip/chip.html.twig' with {
          chip_label: 'Label'|t,
          chip_dismissibile: true,
          chip_icon: 'it-github',
          chip_large: true,
          chip_color: variant
        } %}
      {% endfor %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Chip disabled'|t,
    path_demo_code: '/chip/chip-demo.html.twig#L136',
  } %}
    {% block content %}

      {% for variant in variants %}
        {% include '@bi-bcl/chip/chip.html.twig' with {
          chip_label: 'Label'|t,
          chip_dismissibile: true,
          chip_icon: 'it-github',
          chip_large: true,
          chip_color: variant,
          chip_disabled: true,
        } %}
      {% endfor %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Chip Link'|t,
    path_demo_code: '/chip/chip-demo.html.twig#L156',
  } %}
    {% block content %}

      {% for variant in variants %}
        {% include '@bi-bcl/chip/chip.html.twig' with {
          chip_label: 'Label'|t,
          chip_dismissibile: true,
          chip_icon: 'it-github',
          chip_large: true,
          chip_color: variant,
          chip_url: '#'
        } %}
      {% endfor %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

{% endapply %}