Avatar
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
アバター画像用のコンポーネントの作成例を紹介します。
↓
Preview
Only Core
コンポーネントを作らずにアバターを作るコード例も紹介しておきます。
↓
Preview
<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>Create Component
ここからはAvatar(.c--avatar)というコンポーネントを作って利用する例を紹介していきます。
Source Code
ソースコードを手動でコピー&ペーストしてご利用ください。
Import
import { Avatar } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
size | アバターのサイズを指定します。 |
src | アバター画像のパス |
alt | altテキスト |
Usage
↓
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'/>