Avatar

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

アバター画像用のコンポーネントです。

↓

Preview

<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" />

How to use

@lism-css/ui パッケージでAvatar(.c--avatar)として提供しています。

Import

import { Avatar } from '@lism-css/ui/react';

Props

プロパティ	説明
`size`	アバターのサイズを指定します。
`src`	アバター画像のパス
`alt`	altテキスト

ソースコード

ソースコードは GitHub で公開しています。

Examples

↓

Avatarの使用例

<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx"/>
<Avatar size="5rem" src="https://cdn.lism-css.com/img/avatar/a-02.jpg" alt="Avatar of xxxx" bd bdw="2px" bdc="base" bxsh="20"/>

<div class="c--avatar l--frame -ar:1/1 -w -bdrs:99" style="--w: 4rem">
  <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</div>
<div class="c--avatar l--frame -ar:1/1 -w -bdrs:99 -bd -bxsh:20" style="--w: 5rem; --bdw: 2px; --bdc: var(--base)">
  <img src="https://cdn.lism-css.com/img/avatar/a-02.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</div>

Only lism-css

@lism-css/uiを使用せずに、lism-css のみで Avatar を構築するコード例を紹介します。

↓

Example

<Frame ar="1/1" w="4em" bdrs="99">
  <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</Frame>