Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 21:00:15 +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-status-size: .75rem !default;
$avatar-font-size: 1rem !default; $avatar-font-size: 1rem !default;
$avatar-icon-size: 1.5rem !default; $avatar-icon-size: 1.5rem !default;
$avatar-brand-size: 1.25rem !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default; $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: ( $avatar-sizes: (
"xxs": ( "xxs": (
size: 1rem, size: 1rem,
font-size: .5rem, font-size: .5rem,
icon-size: .75rem, icon-size: .5rem,
status-size: .25rem status-size: .25rem,
brand-size: .5rem
), ),
"xs": ( "xs": (
size: 1.25rem, size: 1.25rem,
font-size: $h6-font-size, font-size: $h6-font-size,
icon-size: .75rem, icon-size: .75rem,
status-size: .375rem status-size: .375rem,
brand-size: .75rem
), ),
"sm": ( "sm": (
size: 2rem, size: 2rem,
font-size: $h5-font-size, font-size: $h5-font-size,
icon-size: 1.5rem, icon-size: 1.5rem,
status-size: .5rem status-size: .5rem,
brand-size: 1rem
), ),
"md": ( "md": (
size: 2.5rem, size: 2.5rem,
font-size: $h4-font-size, font-size: $h4-font-size,
icon-size: 1.5rem, icon-size: 1.5rem,
status-size: .75rem status-size: .75rem,
brand-size: 1.25rem
), ),
"lg": ( "lg": (
size: 3rem, size: 3rem,
font-size: $h2-font-size, font-size: $h2-font-size,
icon-size: 2rem, icon-size: 2rem,
status-size: .75rem status-size: .75rem,
brand-size: 1.25rem
), ),
"xl": ( "xl": (
size: 5rem, size: 5rem,
font-size: 2rem, font-size: 2rem,
icon-size: 3rem, icon-size: 3rem,
status-size: 1rem status-size: 1rem,
brand-size: 1.25rem
), ),
"2xl": ( "2xl": (
size: 7rem, size: 7rem,
font-size: 3rem, font-size: 3rem,
icon-size: 5rem, icon-size: 5rem,
status-size: 1rem status-size: 1rem,
brand-size: 2rem
), ),
) !default; ) !default;
$avatar-border-radius: var(--#{$prefix}border-radius) !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-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
--#{$prefix}avatar-status-size: #{$avatar-status-size}; --#{$prefix}avatar-status-size: #{$avatar-status-size};
--#{$prefix}avatar-bg: #{$avatar-bg}; --#{$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-font-size: #{$avatar-font-size};
--#{$prefix}avatar-icon-size: #{$avatar-icon-size}; --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
--#{$prefix}avatar-brand-size: #{$avatar-brand-size};
position: relative; position: relative;
width: var(--#{$prefix}avatar-size); width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size); height: var(--#{$prefix}avatar-size);
@@ -22,6 +24,7 @@
background: var(--#{$prefix}avatar-bg) no-repeat center/cover; background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius; border-radius: $avatar-border-radius;
box-shadow: var(--#{$prefix}avatar-box-shadow); box-shadow: var(--#{$prefix}avatar-box-shadow);
transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
.icon { .icon {
width: var(--#{$prefix}avatar-icon-size); width: var(--#{$prefix}avatar-icon-size);
@@ -38,6 +41,11 @@
@at-root a#{&} { @at-root a#{&} {
cursor: pointer; 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-status-size: #{map-get($size, status-size)};
--#{$prefix}avatar-font-size: #{map-get($size, font-size)}; --#{$prefix}avatar-font-size: #{map-get($size, font-size)};
--#{$prefix}avatar-icon-size: #{map-get($size, icon-size)}; --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
} --#{$prefix}avatar-brand-size: #{map-get($size, brand-size)};
.avatar-#{$avatar-size} .badge:empty { .badge:empty {
width: map-get($size, status-size); width: map-get($size, status-size);
height: map-get($size, status-size); height: map-get($size, status-size);
}
} }
} }
@@ -64,7 +73,6 @@
// //
.avatar-list { .avatar-list {
--#{$prefix}avatar-list-size: 3rem; --#{$prefix}avatar-list-size: 3rem;
@include elements-list; @include elements-list;
a.avatar { a.avatar {
@@ -80,7 +88,13 @@
.avatar { .avatar {
margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; 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
// //
.avatar-upload { .avatar-upload {
width: 4rem;
height: 4rem;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg; background: $form-check-input-bg;
box-shadow: none; box-shadow: none;
@@ -118,4 +130,16 @@
.avatar-cover { .avatar-cover {
margin-top: calc(-.5 * var(--#{$prefix}avatar-size)); margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg)); 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": { "badges": {
"url": "badges.html", "url": "badges.html",
"title": "Badges" "title": "Badges"
preview/pages/_data/people.json
+7 -4
View File
@@ -48,7 +48,8 @@
"credit_card_type": "bankcard", "credit_card_type": "bankcard",
"bitcoin_address": "1NvUquhGpiEqpedb4H2HCHawrPaG8i4zap", "bitcoin_address": "1NvUquhGpiEqpedb4H2HCHawrPaG8i4zap",
"birth_date": "20/04/1999", "birth_date": "20/04/1999",
"ip_address": "207.39.45.122" "ip_address": "207.39.45.122",
"photo": "static/avatars/052f.jpg"
}, },
{ {
"id": 3, "id": 3,
@@ -177,7 +178,8 @@
"credit_card_type": "maestro", "credit_card_type": "maestro",
"bitcoin_address": "1B4Z2mefCpudYsixuC1gZKzfXyp8224XwD", "bitcoin_address": "1B4Z2mefCpudYsixuC1gZKzfXyp8224XwD",
"birth_date": "01/05/1978", "birth_date": "01/05/1978",
"ip_address": "18.191.234.41" "ip_address": "18.191.234.41",
"photo": "static/avatars/004m.jpg"
}, },
{ {
"id": 8, "id": 8,
@@ -254,7 +256,8 @@
"credit_card_type": "bankcard", "credit_card_type": "bankcard",
"bitcoin_address": "1MAkh5f9Em7A8Af8K4kpebxDWgq5mRreiR", "bitcoin_address": "1MAkh5f9Em7A8Af8K4kpebxDWgq5mRreiR",
"birth_date": "31/05/1959", "birth_date": "31/05/1959",
"ip_address": "239.192.13.146" "ip_address": "239.192.13.146",
"photo": "static/avatars/063m.jpg"
}, },
{ {
"id": 11, "id": 11,
@@ -321,7 +324,7 @@
"slogan": "productize real-time mindshare", "slogan": "productize real-time mindshare",
"shirt_size": "XS", "shirt_size": "XS",
"university": "Olabisi Onabanjo University ", "university": "Olabisi Onabanjo University ",
"ssn": "644-28-1542", "ssn": "644-28-1542",
"country": "Nigeria", "country": "Nigeria",
"country_code": "NG", "country_code": "NG",
"city": "Dadiya", "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" %} {% include "ui/icon.html" icon="plus" %}
<span class="avatar-upload-text">{{ include.text | default: "Add" }}</span>
</a> </a>
preview/pages/_includes/ui/avatar.html
+37 -23
View File
@@ -1,24 +1,38 @@
{% assign src = include.src %} {%- assign src = include.src -%}
{% assign placeholder = include.placeholder %} {%- assign placeholder = include.placeholder -%}
{% if include.person-id %} {%- if include.person-id -%}
{% assign person-id = include.person-id | minus: 1 %} {%- assign person-id = include.person-id | minus: 1 -%}
{% assign person = people[person-id] %} {%- assign person = people[person-id] -%}
{% assign src = person.photo %} {%- assign src = person.photo -%}
{% unless src %} {%- unless src -%}
{% assign placeholder = person.full_name | first_letters %} {%- assign placeholder = person.full_name | first_letters -%}
{% endunless %} {%- endunless -%}
{% elsif include.person %} {%- elsif include.person -%}
{% assign person = include.person %} {%- assign person = include.person -%}
{% assign src = person.photo %} {%- assign src = person.photo -%}
{% unless src %} {%- unless src -%}
{% assign placeholder = person.full_name | first_letters %} {%- assign placeholder = person.full_name | first_letters -%}
{% endunless %} {%- 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 %} {% endif %}
{% assign link = include.link | default: false %} </{{ el }}>
{% 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 }}>
preview/pages/_includes/ui/icon.html
+19 -20
View File
@@ -1,32 +1,31 @@
{% assign icon-name = include.icon %} {%- assign icon-name = include.icon -%}
{% assign icon-type = include.type | default: "outline" %} {%- assign icon-type = include.type | default: "outline" -%}
{% assign replace-to = "icon" %} {%- assign replace-to = "icon" -%}
{% if include.class %} {%- if include.class -%}
{% assign replace-to = replace-to | append: ' ' | append: include.class %} {%- assign replace-to = replace-to | append: ' ' | append: include.class -%}
{% endif %} {%- endif -%}
{% if include.color %} {%- if include.color -%}
{% assign replace-to = replace-to | append: ' text-' | append: include.color %} {%- assign replace-to = replace-to | append: ' text-' | append: include.color -%}
{% endif %} {%- endif %}
{% if include.inline %} {%- if include.inline -%}
{% assign replace-to = replace-to | append: ' icon-inline' %} {%- assign replace-to = replace-to | append: ' icon-inline' -%}
{% endif %} {%- endif -%}
{% if include['size'] %} {%- if include['size'] -%}
{% assign replace-to = replace-to | append: ' icon-' | append: include['size'] %} {%- assign replace-to = replace-to | append: ' icon-' | append: include['size'] -%}
{% endif %} {%- 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> <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 }} --> <!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %} {% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %} {% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }} {{ 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>