Avatar
アバター画像用のコンポーネントの作成例を紹介します。
↓
Preview
Only Core
Section titled “Only Core”コンポーネントを作らずにアバターを作るコード例も紹介しておきます。
↓
Preview
<Frame ar='1/1' w='4em' bdrs='99'> <Media src='/img/avatar01.jpg' alt='Avatar of xxxx' width='100%' height='100%' decoding='async' /></Frame>Create Component
Section titled “Create Component”ここからはAvatar(.c--avatar)というコンポーネントを作って利用する例を紹介していきます。
Source Code
Section titled “Source Code” ソースコードを手動でコピー&ペーストしてご利用ください。
Import
Section titled “Import” import jsx from '@/components/lism/Avatar/index.jsx'; | プロパティ | 説明 |
|---|---|
size | アバターのサイズを指定します。 |
src | アバター画像のパス |
alt | altテキスト |
↓
Avatarの使用例 <Avatar size='4rem' src='/img/avatar01.jpg' alt='Avatar of xxxx'/><Avatar size='5rem' src='/img/avatar02.jpg' alt='Avatar of xxxx' bd bdw='2px' bdc='base' bxsh='20'/>