本文へ移動
uiify

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
import { Avatar } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Avatar aria-hidden="true" className="" fallback="AL" name="Ada Lovelace" size="md" />
      <span>Ada Lovelace</span>
    </>
  );
}
@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

Prop型既定値説明
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.
srcstring—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.
classNamestring—ルート要素に適用するクラス。
styleCSSProperties—Native root styles.
refRef<HTMLElement>—Ref forwarded to the rendered root element.
renderReactElement | ((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
このページは機械翻訳によるもので、レビューは未実施です。