t-avatar
Use this component to display images or icons as an avatar. Under the hood, it has a t-card component and accept all of its options.
Basic usage
<TAvatar
class="w-16"
ratio="1"
design="raised"
color="primary"
icon="mdi:account-circle"
elevated
circle //
/>
Image
<TAvatar
class="w-64"
ratio="1"
design="raised"
size="xl"
src="https://source.unsplash.com/800x800/?portrait"
onClick={() => {}}
elevated
rounded
/>
Profile
John Smith
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
+9
<TFlex align="center">
<TAvatar
class="w-50"
ratio="1"
design="flat"
src="https://source.unsplash.com/800x800/?man+portrait"
me="xl"
circle
/>
<TCell>
<TFlex align="center" mb="xs">
<TText color="primary" size="xl" weight="normal" me="sm">
John Smith
</TText>
<TIconButton size="md" icon="mdi:twitter" nmy />
</TFlex>
<TText color="secondary" size="sm" mb="xs">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some
form, by injected humour.
</TText>
<TFlex nmx="md">
<TButton color="danger" size="md" me="xs">
Following
</TButton>
<TBadge color="danger" value="+9" size="sm" inline>
<TButton color="danger" size="md" me="xs">
Following
</TButton>
</TBadge>
</TFlex>
</TCell>
</TFlex>
Badge
<TBadge design="raised" color="danger" size="xl" value="9">
<TAvatar
class="w-64"
ratio={3 / 4}
design="flat"
size="xl"
src="https://source.unsplash.com/512x512/?man+portrait"
rounded
/>
</TBadge>
Custom Slot
JS
<TAvatar
class="w-24"
ratio="1"
design="raised"
color="success"
src="https://source.unsplash.com/512x512/?man+portrait"
circle
>
<TTitle size="xl" color="surface">
JS
</TTitle>
</TAvatar>
API
No options available