Avatar

Atom

Kullanıcı profil fotoğrafı veya baş harfleri gösterici. 5 boyut, opsiyonel status dot.

Initials (sizes)

Preview

JD JD JD JD JD

Code

<%- include('modules/ui/Avatar', { name: 'Jane Doe', size: 'xs' }) %>
<%- include('modules/ui/Avatar', { name: 'Jane Doe', size: 'sm' }) %>
<%- include('modules/ui/Avatar', { name: 'Jane Doe', size: 'md' }) %>
<%- include('modules/ui/Avatar', { name: 'Jane Doe', size: 'lg' }) %>
<%- include('modules/ui/Avatar', { name: 'Jane Doe', size: 'xl' }) %>

With label

Preview

John Smith

john@example.com

Code


  <%- include('modules/ui/Avatar', { name: 'John Smith' }) %>
  
    John Smith
    john@example.com

Status dot

Preview

A B C D

Code

<%- include('modules/ui/Avatar', { name: 'Alice', status: 'online' }) %>
<%- include('modules/ui/Avatar', { name: 'Bob',   status: 'away' }) %>
<%- include('modules/ui/Avatar', { name: 'Carol', status: 'busy' }) %>
<%- include('modules/ui/Avatar', { name: 'Dave',  status: 'offline' }) %>

Image source

Preview

Image source

Same sizing and status rules apply

Code

<%- include('modules/ui/Avatar', { src: '/avatars/jane.jpg', name: 'Jane Doe' }) %>

Source modules/ui/Avatar.ejs

<%
var _sz     = locals.size   || 'md';
var _name   = locals.name   || '';
var _src    = locals.src    || null;
var _status = locals.status || null;

var initials = _name.trim().split(/\s+/).map(function(w){ return w[0] || ''; }).slice(0, 2).join('').toUpperCase() || '?';

var sc = {
  xs: 'h-6 w-6 text-xs',
  sm: 'h-8 w-8 text-xs',
  md: 'h-10 w-10 text-sm',
  lg: 'h-12 w-12 text-base',
  xl: 'h-16 w-16 text-lg',
}[_sz] || 'h-10 w-10 text-sm';

var statusColor = {
  online: 'bg-success', offline: 'bg-text-disabled', away: 'bg-warning', busy: 'bg-error',
}[_status] || '';

var dotSc = {
  xs: 'h-1.5 w-1.5', sm: 'h-2 w-2', md: 'h-2.5 w-2.5', lg: 'h-3 w-3', xl: 'h-4 w-4',
}[_sz] || 'h-2.5 w-2.5';
%>

  <% if (_src) { %>
    
  <% } else { %>
    
      <%= initials %>
    
  <% } %>
  <% if (_status) { %>
    
  <% } %>