Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

Add avatars page with various demos of avatars (#2254)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-30 20:14:38 +02:00
committed by GitHub
parent f9e4da2fb0
commit 864619201e
9 changed files with 297 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/proud-cheetahs-provide.md
+6
View File
@@ -0,0 +1,6 @@
---
"@tabler/core": patch
"preview": patch
---
Add avatars page with various demos of avatars
core/scss/_variables.scss
+16 -8
View File
@@ -342,49 +342,57 @@ $avatar-size: 2.5rem !default;
$avatar-status-size: .75rem !default;
$avatar-font-size: 1rem !default;
$avatar-icon-size: 1.5rem !default;
$avatar-brand-size: 1.25rem !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: (
"xxs": (
size: 1rem,
font-size: .5rem,
icon-size: .75rem,
status-size: .25rem
icon-size: .5rem,
status-size: .25rem,
brand-size: .5rem
),
"xs": (
size: 1.25rem,
font-size: $h6-font-size,
icon-size: .75rem,
status-size: .375rem
status-size: .375rem,
brand-size: .75rem
),
"sm": (
size: 2rem,
font-size: $h5-font-size,
icon-size: 1.5rem,
status-size: .5rem
status-size: .5rem,
brand-size: 1rem
),
"md": (
size: 2.5rem,
font-size: $h4-font-size,
icon-size: 1.5rem,
status-size: .75rem
status-size: .75rem,
brand-size: 1.25rem
),
"lg": (
size: 3rem,
font-size: $h2-font-size,
icon-size: 2rem,
status-size: .75rem
status-size: .75rem,
brand-size: 1.25rem
),
"xl": (
size: 5rem,
font-size: 2rem,
icon-size: 3rem,
status-size: 1rem
status-size: 1rem,
brand-size: 1.25rem
),
"2xl": (
size: 7rem,
font-size: 3rem,
icon-size: 5rem,
status-size: 1rem
status-size: 1rem,
brand-size: 2rem
),
) !default;
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
core/scss/ui/_avatars.scss
+33 -9
View File
@@ -2,9 +2,11 @@
--#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
--#{$prefix}avatar-status-size: #{$avatar-status-size};
--#{$prefix}avatar-bg: #{$avatar-bg};
--#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
--#{$prefix}avatar-box-shadow-color: var(--#{$prefix}border-color-translucent);
--#{$prefix}avatar-box-shadow: inset 0 0 0 1px var(--#{$prefix}avatar-box-shadow-color);
--#{$prefix}avatar-font-size: #{$avatar-font-size};
--#{$prefix}avatar-icon-size: #{$avatar-icon-size};
--#{$prefix}avatar-brand-size: #{$avatar-brand-size};
position: relative;
width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size);
@@ -22,6 +24,7 @@
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius;
box-shadow: var(--#{$prefix}avatar-box-shadow);
transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
.icon {
width: var(--#{$prefix}avatar-icon-size);
@@ -38,6 +41,11 @@
@at-root a#{&} {
cursor: pointer;
&:hover {
color: var(--#{$prefix}primary);
--#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary);
}
}
}
@@ -51,11 +59,12 @@
--#{$prefix}avatar-status-size: #{map-get($size, status-size)};
--#{$prefix}avatar-font-size: #{map-get($size, font-size)};
--#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
}
--#{$prefix}avatar-brand-size: #{map-get($size, brand-size)};
.avatar-#{$avatar-size} .badge:empty {
width: map-get($size, status-size);
height: map-get($size, status-size);
.badge:empty {
width: map-get($size, status-size);
height: map-get($size, status-size);
}
}
}
@@ -64,7 +73,6 @@
//
.avatar-list {
--#{$prefix}avatar-list-size: 3rem;
@include elements-list;
a.avatar {
@@ -80,7 +88,13 @@
.avatar {
margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
@each $avatar-size, $size in $avatar-sizes {
.avatar-list-#{$avatar-size} {
--#{$prefix}avatar-list-size: #{map-get($size, size)};
}
}
@@ -88,8 +102,6 @@
// Avatar upload
//
.avatar-upload {
width: 4rem;
height: 4rem;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg;
box-shadow: none;
@@ -118,4 +130,16 @@
.avatar-cover {
margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
}
.avatar-brand {
width: var(--#{$prefix}avatar-brand-size);
height: var(--#{$prefix}avatar-brand-size);
position: absolute;
right: -2px;
bottom: -2px;
z-index: 1000;
background: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius);
border: 1px solid var(--#{$prefix}border-color);
}
preview/pages/_data/menu.json
+5
View File
@@ -63,6 +63,11 @@
}
}
},
"avatars": {
"url": "avatars.html",
"title": "Avatars",
"badge": "New"
},
"badges": {
"url": "badges.html",
"title": "Badges"
preview/pages/_data/people.json
+7 -4
View File
@@ -48,7 +48,8 @@
"credit_card_type": "bankcard",
"bitcoin_address": "1NvUquhGpiEqpedb4H2HCHawrPaG8i4zap",
"birth_date": "20/04/1999",
"ip_address": "207.39.45.122"
"ip_address": "207.39.45.122",
"photo": "static/avatars/052f.jpg"
},
{
"id": 3,
@@ -177,7 +178,8 @@
"credit_card_type": "maestro",
"bitcoin_address": "1B4Z2mefCpudYsixuC1gZKzfXyp8224XwD",
"birth_date": "01/05/1978",
"ip_address": "18.191.234.41"
"ip_address": "18.191.234.41",
"photo": "static/avatars/004m.jpg"
},
{
"id": 8,
@@ -254,7 +256,8 @@
"credit_card_type": "bankcard",
"bitcoin_address": "1MAkh5f9Em7A8Af8K4kpebxDWgq5mRreiR",
"birth_date": "31/05/1959",
"ip_address": "239.192.13.146"
"ip_address": "239.192.13.146",
"photo": "static/avatars/063m.jpg"
},
{
"id": 11,
@@ -321,7 +324,7 @@
"slogan": "productize real-time mindshare",
"shirt_size": "XS",
"university": "Olabisi Onabanjo University ",
"ssn": "644-28-1542",
"ssn": "644-28-1542",
"country": "Nigeria",
"country_code": "NG",
"city": "Dadiya",
preview/pages/_includes/ui/avatar-upload.html
+1 -2
View File
@@ -1,4 +1,3 @@
<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}">
<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}{% if include.size %} avatar-{{ include.size }}{% endif %}">
{% include "ui/icon.html" icon="plus" %}
<span class="avatar-upload-text">{{ include.text | default: "Add" }}</span>
</a>
preview/pages/_includes/ui/avatar.html
+37 -23
View File
@@ -1,24 +1,38 @@
{% assign src = include.src %}
{% assign placeholder = include.placeholder %}
{% if include.person-id %}
{% assign person-id = include.person-id | minus: 1 %}
{% assign person = people[person-id] %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
{% elsif include.person %}
{% assign person = include.person %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
{%- assign src = include.src -%}
{%- assign placeholder = include.placeholder -%}
{%- if include.person-id -%}
{%- assign person-id = include.person-id | minus: 1 -%}
{%- assign person = people[person-id] -%}
{%- assign src = person.photo -%}
{%- unless src -%}
{%- assign placeholder = person.full_name | first_letters -%}
{%- endunless -%}
{%- elsif include.person -%}
{%- assign person = include.person -%}
{%- assign src = person.photo -%}
{%- unless src -%}
{%- assign placeholder = person.full_name | first_letters -%}
{%- endunless -%}
{%- endif -%}
{%- assign link = include.link | default: false -%}
{%- if include.dropdown -%}
{%- assign link = true -%}
{%- endif -%}
{%- assign el = 'span' -%}
{%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
{%- if include.status -%}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
{%- endif -%}
{%- if include.brand -%}
<span class="avatar-brand" style="background-image: url({{ page | relative }}/static/brands/{{ include.brand }}.svg);"></span>
{%- endif -%}
{% if src %}
{% elsif placeholder %}
{{ placeholder }}
{% elsif include.icon %}
{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}
{% else %}
{% include "ui/icon.html" icon="user" class="avatar-icon" %}
{% endif %}
{% assign link = include.link | default: false %}
{% if include.dropdown %}
{% assign link = true %}
{% endif %}
{% assign el = 'span' %}
{% if link %}{% assign el = 'a' %}{% endif %}
<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.rounded %} rounded{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>{% if include.status %}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
</{{ el }}>
preview/pages/_includes/ui/icon.html
+19 -20
View File
@@ -1,32 +1,31 @@
{% assign icon-name = include.icon %}
{% assign icon-type = include.type | default: "outline" %}
{%- assign icon-name = include.icon -%}
{%- assign icon-type = include.type | default: "outline" -%}
{% assign replace-to = "icon" %}
{%- assign replace-to = "icon" -%}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{%- if include.class -%}
{%- assign replace-to = replace-to | append: ' ' | append: include.class -%}
{%- endif -%}
{% if include.color %}
{% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% endif %}
{%- if include.color -%}
{%- assign replace-to = replace-to | append: ' text-' | append: include.color -%}
{%- endif %}
{% if include.inline %}
{% assign replace-to = replace-to | append: ' icon-inline' %}
{% endif %}
{%- if include.inline -%}
{%- assign replace-to = replace-to | append: ' icon-inline' -%}
{%- endif -%}
{% if include['size'] %}
{% assign replace-to = replace-to | append: ' icon-' | append: include['size'] %}
{% endif %}
{%- if include['size'] -%}
{%- assign replace-to = replace-to | append: ' icon-' | append: include['size'] -%}
{%- endif -%}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{%- assign replace-to = 'class="' | append: replace-to | append: '"' -%}
{% if site.useIconfont %}
{%- if site.useIconfont -%}
<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
{% elsif icons[icon-name] %}
{%- elsif icons[icon-name] -%}
<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% endif %}
{%- endif -%}
preview/pages/avatars.html
+173
View File
@@ -0,0 +1,173 @@
---
title: Avatars
layout: default
description: A page showcasing different avatar styles and examples.
permalink: /avatars.html
page-menu: base.avatars
page-header: Avatars
---
<div class="row row-cards">
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Default avatar</h2>
{% include "ui/avatar.html" %}
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar with icon</h2>
{% assign icon-icons = "user,settings,car,balloon,users,users-group,apps,ghost" | split: "," %}
<div class="avatar-list">
{% for icon in icon-icons %}
{% include "ui/avatar.html" icon=icon %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar with icon</h2>
<div class="avatar-list">
{% for color in site.colors %}
{% include "ui/avatar.html" icon="user" color=color[0] %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Simple avatar</h2>
<div class="avatar-list">
{% for person in people limit: 8 -%}
{% include "ui/avatar.html" person=person %}
{%- endfor %}
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar placeholder</h2>
<div class="avatar-list">
{% for person in people limit: 8 %}
{% assign placeholder = person.full_name | first_letters %}
{% include "ui/avatar.html" placeholder=placeholder %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar shapes</h2>
<div class="avatar-list">
{% include "ui/avatar.html" %}
{% include "ui/avatar.html" class="rounded-circle" %}
{% include "ui/avatar.html" class="rounded-0" %}
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar sizes</h2>
<div class="row">
<div class="col-6">
<div class="avatar-list">
{% include "ui/avatar.html" size="xxs" %}
{% include "ui/avatar.html" size="xs" %}
{% include "ui/avatar.html" size="sm" %}
{% include "ui/avatar.html" size="md" %}
{% include "ui/avatar.html" size="lg" %}
{% include "ui/avatar.html" size="xl" %}
</div>
</div>
<div class="col-6">
<div class="avatar-list">
{% include "ui/avatar.html" placeholder="PK" size="xxs" %}
{% include "ui/avatar.html" placeholder="PK" size="xs" %}
{% include "ui/avatar.html" placeholder="PK" size="sm" %}
{% include "ui/avatar.html" placeholder="PK" size="md" %}
{% include "ui/avatar.html" placeholder="PK" size="lg" %}
{% include "ui/avatar.html" placeholder="PK" size="xl" %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar lists</h2>
<div class="row g-3">
{% assign sizes = "xxs,xs,sm,md,lg" | split: "," %}
{% for size in sizes %}
<div class="col-6">
<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
{% for person in people limit: 5 %}
{% include "ui/avatar.html" person=person %}
{% endfor %}
{% include "ui/avatar.html" icon="plus" link %}
</div>
</div>
<div class="col-6">
<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
{% for person in people limit: 5 %}
{% include "ui/avatar.html" person=person class="rounded-circle" %}
{% endfor %}
{% include "ui/avatar.html" icon="plus" link class="rounded-circle" %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar placeholder</h2>
{% assign sizes = "xxs,xs,sm,md,lg,xl,2xl" | split: "," %}
{% for size in sizes %}
{% include "ui/avatar-upload.html" size=size %}
{% endfor %}
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar statuses</h2>
{% assign colors = "red,green,blue,yellow,secondary" | split: "," %}
{% for color in colors %}
{% include "ui/avatar.html" person-id=forloop.index class="rounded-circle" status=color %}
{% endfor %}
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Avatar brands</h2>
{% assign brands = "netflix,amazon,messenger,figma,twitch" | split: "," %}
{% for brand in brands %}
{% include "ui/avatar.html" person-id=forloop.index brand=brand %}
{% endfor %}
</div>
</div>
</div>
</div>