Avatar

Named image or fallback initials for a person.

المتصفحات: Chrome 123+Firefox 121+Safari 17.5+
الفئة: 0
الحجم المضغوط: 293 B
ميزانية التخطيط القسري: 0 ms
ميزانية axe: 0
متوافق مع SSR: نعم
العقد المنشور: بيئة الاختبار

المختبر

Avatar

Ada Lovelace

React

CSS

Tailwind

@layer components {
  [data-uiify-avatar] {
    display: inline-grid;
    place-items: center;
    overflow: clip;
    border-radius: var(--radius-full);
    background: var(--muted);
    color: var(--muted-foreground);
    font-weight: var(--weight-medium);
    line-height: 1;
    vertical-align: middle;
  }

  [data-uiify-avatar][data-size="sm"] {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: var(--text-xs);
  }

  [data-uiify-avatar]:is(:not([data-size]), [data-size="md"]) {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--text-sm);
  }

  [data-uiify-avatar][data-size="lg"] {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: var(--text-base);
  }

  [data-uiify-avatar] > [data-part="image"] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

import { Avatar } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Avatar
        aria-hidden="true"
        className="
          inline-grid place-items-center overflow-clip rounded-[var(--radius-full)] bg-muted text-muted-foreground
          font-[number:var(--weight-medium)] leading-none [vertical-align:middle] data-[size=sm]:[inline-size:2rem]
          data-[size=sm]:[block-size:2rem] data-[size=sm]:text-xs
          [&:is(:not([data-size]),[data-size=md])]:[inline-size:2.5rem]
          [&:is(:not([data-size]),[data-size=md])]:[block-size:2.5rem] [&:is(:not([data-size]),[data-size=md])]:text-sm
          data-[size=lg]:[inline-size:3rem] data-[size=lg]:[block-size:3rem] data-[size=lg]:text-base
          [&>[data-part=image]]:[inline-size:100%] [&>[data-part=image]]:[block-size:100%]
          [&>[data-part=image]]:object-cover
        "
        fallback="AL"
        name="Ada Lovelace"
        size="md"
      />
      <span>Ada Lovelace</span>
    </>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('inline-grid place-items-center overflow-clip rounded-[var(--radius-full)] bg-muted text-muted-foreground font-[number:var(--weight-medium)] leading-none [vertical-align:middle] data-[size=sm]:[inline-size:2rem] data-[size=sm]:[block-size:2rem] data-[size=sm]:text-xs [&:is(:not([data-size]),[data-size=md])]:[inline-size:2.5rem] [&:is(:not([data-size]),[data-size=md])]:[block-size:2.5rem] [&:is(:not([data-size]),[data-size=md])]:text-sm data-[size=lg]:[inline-size:3rem] data-[size=lg]:[block-size:3rem] data-[size=lg]:text-base [&>[data-part=image]]:[inline-size:100%] [&>[data-part=image]]:[block-size:100%] [&>[data-part=image]]:object-cover');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

أمثلة

Sizes

The root exposes its size through data-size.

Ada Lovelace

import { Avatar } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Avatar aria-hidden="true" name="Ada Lovelace" fallback="AL" size="sm" />
      <Avatar aria-hidden="true" name="Ada Lovelace" fallback="AL" size="md" />
      <Avatar aria-hidden="true" name="Ada Lovelace" fallback="AL" size="lg" />
      <span>Ada Lovelace</span>
    </>
  );
}

API

`Avatar`

الخاصية	النوع	افتراضي	الوصف
`name`*	`string`	—	Accessible name for the person represented by the avatar.
`fallback`*	`string`	—	Text shown when src is omitted; provide meaningful initials or a short name.
`src`	`string`	—	Image URL; the image is rendered only when supplied.
`size`	`"sm" \| "md" \| "lg"`	—	Visual scale written to data-size; omitted when unset.
`aria-hidden`	`"true"`	—	Hide the avatar from assistive technology when adjacent visible text already names the person.
`className`	`string`	—	الفئة المطبّقة على العنصر الجذر.
`style`	`CSSProperties`	—	Native root styles.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the rendered root element.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

لوحة المفاتيح

المفتاح	الإجراء

إمكانية الوصول

The root is named as an image and the fallback is hidden from assistive technology. Keep a visible name beside decorative avatars and set aria-hidden when that text already names the person. A supplied src renders an image; image-load failures do not trigger a replacement fallback.

نقاط التنسيق

data-uiify-avatardata-partdata-size

إطار العمل

التنسيق

المظهر

اللغة

Avatar

المختبر

Avatar

أمثلة

Sizes

API

`Avatar`

لوحة المفاتيح

إمكانية الوصول

نقاط التنسيق