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

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

  {% set sizes = [
    "xs", "sm", "md", "lg", "xl", "xxl"
  ] %}

  {% set colors = [
    "primary", "secondary", "success", "green", "orange", "red"
  ] %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar size'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L32',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}
      {% for size in sizes %}
        {% embed '@bi-bcl/avatar/avatar.html.twig' with {
          avatar_size: size
        } %}
          {% block avatarContent %}
            <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero picture {{ size }}">
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar with text'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L50',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}
      {% for color in colors %}
        {% include '@bi-bcl/avatar/avatar.html.twig' with {
          avatar_type: 'text',
          avatar_text: random('BCDFGLMNPRSTVZ') ~ random('AEIOU'),
          avatar_text_color: color,
          avatar_size: random(['sm', 'md', 'lg', 'xl', 'xxl']),
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar with icon'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L67',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}
      {% for color in icon_colors %}
        {% include '@bi-bcl/avatar/avatar.html.twig' with {
          avatar_icon_color: color,
          avatar_size: random(['md', 'lg', 'xl', 'xxl']),
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar link'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L82',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}

      {% embed '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_size: 'xl',
        avatar_url: '#',
      } %}
        {% block avatarContent %}
          <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero">
        {% endblock %}
      {% endembed %}

      {% include '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'text',
        avatar_text: 'MR',
        avatar_text_color: 'red',
        avatar_size: 'xl',
        avatar_url: '#',
      } %}

      {% include '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'icon',
        avatar_icon: 'it-search',
        avatar_size: 'xl',
        avatar_url: '#',
      } %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar link with tooltip'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L116',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}

      {% embed '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'image',
        avatar_size: 'xl',
        avatar_url: '#',
        avatar_tooltip_text: '<strong>User Name</strong><br /><em>Administrator</em>',
        avatar_tooltip_placement: 'left'
      } %}
        {% block avatarContent %}
          <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Francesca Rossi">
        {% endblock %}
      {% endembed %}

      {% include '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'text',
        avatar_text: 'MR',
        avatar_text_color: 'red',
        avatar_size: 'xl',
        avatar_url: '#',
        avatar_tooltip_text: '<strong>User Name</strong><br /><em>Editor</em>',
        avatar_tooltip_placement: 'top'
      } %}

      {% include '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'icon',
        avatar_icon: 'it-search',
        avatar_size: 'xl',
        avatar_url: '#',
        avatar_tooltip_text: '<strong>Search</strong><br /><em>News archive</em>',
        avatar_tooltip_placement: 'right'
      } %}

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


  {% set presences = [
    "active", "busy", "hidden"
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar presence'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L162',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}
      {% for presence in presences %}
        {% embed '@bi-bcl/avatar/avatar.html.twig' with {
          avatar_size: 'xl',
          avatar_presence: presence
        } %}
          {% block avatarContent %}
            <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero {{ presence }}">
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}


  {% set statuses = [
    "approved", "declined", "notify"
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Avatar status'|t,
    path_demo_code: '/avatar/avatar-demo.html.twig#L185',
    demo_classes: ['d-flex', 'align-items-center', 'justify-content-around', 'flex-wrap', 'flex-sm-nowrap']
  } %}
    {% block content %}
      {% for status in statuses %}
        {% embed '@bi-bcl/avatar/avatar.html.twig' with {
          avatar_size: 'xl',
          avatar_status: status
        } %}
          {% block avatarContent %}
            <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero {{ status }}">
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}

{% endapply %}