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テキスト

基本構造

<Avatar src="" alt=" />

Source Code

import { Frame } from 'lism-css/react';

export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
	return (
		<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
			<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
		</Frame>
	);
}

---
import { Frame } from 'lism-css/astro';

const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
---

<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
	<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
</Frame>

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>